js实现有时间限制消失的图片方法


Posted in Javascript onFebruary 27, 2015

本文实例讲述了js实现有时间限制消失的图片方法。分享给大家供大家参考。具体实现方法如下:

<html>

<title>指定时间内消失的图片</title>

<body>

<SCRIPT language=JavaScript>

<!-- Hide the script from old browsers --

// 1) 做一个88*31的LOGO。

if (document.images)

var staticlogo=new Image(758,100)

// 2) 设置LOGO的路径。

staticlogo.src="/images/banner.gif"

// 3) 以下是LOGO代表的连接。

var logolink="http://ww3water.com/"

// 4) 设置ALT属性。

var alttext="代码家园"

// 5) 设置下列属性为 1或者0(1是IE特有的,使LOGO隐现)

var fadeintoview=1

/* 6) 最后设置LOGO显示的时间,例如12 秒,数值为0表示一直显示

*/

var visibleduration=5

function regenerate(){

window.location.reload()

}

function regenerate2(){

if (document.layers)

setTimeout("window.onresize=regenerate",400)

}

var fadeset=''

if (fadeintoview)

fadeset="filter:alpha(opacity=0)"

if (document.all)

document.write('<span id="logo"" style="'+fadeset+';position:absolute;top:100;width:'+staticlogo.width+';height:'+staticlogo.height+'"></span>')

function bringintoview(){

if (logo.filters.alpha.opacity<=95)

logo.filters.alpha.opacity+=5

else{

clearInterval(viewit)

if (visibleduration!=0)

setTimeout("logo.style.visibility='hidden'",visibleduration*1000)

}

}

function createlogo(){

staticimage=new Layer(100)

staticimage.left=-300

staticimage.top=120

staticimage.document.write('<a href="'+logolink+'"><img src="'+staticlogo.src+'" border=0 alt="'+alttext+'"></a>')

staticimage.document.close()

staticimage.visibility="show"

regenerate2()

staticitns()

}

if (document.layers)

window.onload=createlogo;

if (document.all){

w=2

h=2

logo.style.left=w

logo.style.top=h

}

function logoit(){

var w2=document.body.scrollLeft+w

var h2=document.body.scrollTop+h

logo.style.left=w2

logo.style.top=h2

}

function logoit2(){

staticimage.left=pageXOffset+2

staticimage.top=pageYOffset+2

}

function insertimage(){

logo.innerHTML='<a href="'+logolink+'"><img src="'+staticlogo.src+'" border=0 alt="'+alttext+'"></a>'

if (fadeintoview)

viewit=setInterval("bringintoview()",100)

else{

if (visibleduration!=0)

setTimeout("logo.style.visibility='hidden'",visibleduration*1000)

}

}

if (document.all){

window.onscroll=logoit

window.onresize=new Function("window.location.reload()")

window.onload=insertimage

}

function staticitns(){

setInterval("logoit2()",90)

if (visibleduration!=0)

setTimeout("staticimage.visibility='hide'",visibleduration*1000)

}

//--> 

</SCRIPT>

</body>

</html>

<br>

<br>

<br>

<br>

<br>

<br>图片5秒之后自动消失。

<br>

<br>

<br>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
js表格分页实现代码
Sep 18 Javascript
IE8下关于querySelectorAll()的问题
May 13 Javascript
解读JavaScript代码 var ie = !-[1,] 最短的IE判定代码
May 28 Javascript
使用jQuery Ajax功能时需要注意的一个问题(内存溢出)
May 30 Javascript
js Canvas绘制圆形时钟教程
Feb 06 Javascript
Vue计算属性的使用
Aug 04 Javascript
微信小程序实现循环动画效果
Jul 16 Javascript
jQuery实现点击图标div循环放大缩小功能
Sep 30 jQuery
DatePickerDialog 自定义样式及使用全解
Jul 09 Javascript
详解element-ui中el-select的默认选择项问题
Aug 02 Javascript
js实现简单掷骰子小游戏
Oct 24 Javascript
js数组的基本使用总结
Jan 18 Javascript
js用拖动滑块来控制图片大小的方法
Feb 27 #Javascript
javascript中局部变量和全局变量的区别详解
Feb 27 #Javascript
对比分析AngularJS中的$http.post与jQuery.post的区别
Feb 27 #Javascript
JavaScript中Function详解
Feb 27 #Javascript
JS实现图片产生波纹一样flash效果的方法
Feb 27 #Javascript
js实现鼠标触发图片抖动效果的方法
Feb 27 #Javascript
javascript实现当前页导航激活的方法
Feb 27 #Javascript
You might like
php开发工具之vs2005图解
2008/01/12 PHP
PHPMyAdmin 快速配置方法
2009/05/11 PHP
ThinkPHP3.1新特性之命名范围的使用
2014/06/19 PHP
PHP中unset,array_splice删除数组中元素的区别
2014/07/28 PHP
js下写一个事件队列操作函数
2010/07/19 Javascript
利用JQuery和JS实现奇偶行背景颜色自定义效果
2012/11/19 Javascript
javascript延时加载之defer测试
2012/12/28 Javascript
JavaScript制作简易的微信打飞机
2015/03/31 Javascript
JavaScript SHA512&amp;SHA256加密算法详解
2015/08/11 Javascript
使用JavaScript脚本判断页面是否在微信中被打开
2016/03/06 Javascript
jQuery实现的简单分页示例
2016/06/01 Javascript
走进javascript——不起眼的基础,值和分号
2017/02/24 Javascript
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
2018/04/25 Javascript
vue.js实现带日期星期的数字时钟功能示例
2018/08/28 Javascript
在vue中解决提示警告 for循环报错的方法
2018/09/28 Javascript
JavaScript面试技巧之数组的一些不low操作
2019/03/22 Javascript
利用Node.js如何实现文件循环覆写
2019/04/05 Javascript
Vue中computed、methods与watch的区别总结
2019/04/10 Javascript
JavaScript变量Dom对象的所有属性
2020/04/30 Javascript
python中partial()基础用法说明
2018/12/30 Python
详解Django定时任务模块设计与实践
2019/07/24 Python
python程序输出无内容的解决方式
2020/04/09 Python
Django如何批量创建Model
2020/09/01 Python
css3 transform属性详解
2014/09/30 HTML / CSS
西班牙香水和化妆品连锁店:Druni
2019/05/05 全球购物
斯洛伐克家具和时尚装饰品购物网站:Butlers.sk
2019/09/08 全球购物
英国领先的男装设计师服装独立零售商:Repertoire Fashion
2020/10/19 全球购物
构造器Constructor是否可被override?
2013/08/06 面试题
描述RIP和OSPF区别以及特点
2015/01/17 面试题
校园达人秀策划书
2014/01/12 职场文书
质量保证书格式
2015/02/27 职场文书
大学毕业晚会开场白
2015/05/29 职场文书
傲慢与偏见电影观后感
2015/06/10 职场文书
2016年小学中秋节活动总结
2016/04/05 职场文书
Go语言设计模式之结构型模式
2021/06/22 Golang
Python利用capstone实现反汇编
2022/04/06 Python