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 相关文章推荐
IE6浏览器下resize事件被执行了多次解决方法
Dec 11 Javascript
js根据给定的日期计算当月有多少天实现思路及代码
Feb 25 Javascript
jquery清空textarea等输入框实现代码
Apr 22 Javascript
JS实现遮罩层效果的简单实例
Nov 12 Javascript
JS获取网页属性包括宽、高等等
Apr 03 Javascript
jquery制作漂亮的弹出层提示消息特效
Dec 23 Javascript
JQuery的ON()方法支持的所有事件罗列
Feb 28 Javascript
JavaScript中的replace()方法使用详解
Jun 06 Javascript
PageSwitch插件实现100种不同图片切换效果
Jul 28 Javascript
Three.js实现简单3D房间布局
Dec 30 Javascript
纯JS实现五子棋游戏
May 28 Javascript
原生js实现表格循环滚动
Nov 24 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
smarty模板引擎之内建函数用法
2015/03/30 PHP
php在apache环境下实现gzip配置方法
2015/04/02 PHP
PHP高精确度运算BC函数库实例详解
2017/08/15 PHP
php-fpm服务启动脚本的方法
2018/04/27 PHP
PHP PDOStatement::bindParam讲解
2019/01/30 PHP
关于Laravel参数验证的一些疑与惑
2019/11/19 PHP
让广告代码不再影响你的网页加载速度
2006/07/07 Javascript
jQuery 数据缓存data(name, value)详解及实现
2010/01/04 Javascript
菜鸟学习JavaScript小实验之函数引用
2010/11/17 Javascript
使用简洁的jQuery方法实现隔行换色功能
2014/01/02 Javascript
JavaScript中检查对象property的存在性方法介绍
2014/12/30 Javascript
jQuery中:file选择器用法实例
2015/01/04 Javascript
jquery实现点击页面计算点击次数
2015/01/23 Javascript
对Web开发中前端框架与前端类库的一些思考
2015/03/27 Javascript
使用C++为node.js写扩展模块
2015/04/22 Javascript
javascript将DOM节点添加到文档的方法实例分析
2015/08/04 Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
2015/08/18 Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
2017/02/27 Javascript
javascript 中的继承实例详解
2017/05/05 Javascript
Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果
2017/10/31 Javascript
vue2.0安装style/css loader的方法
2018/03/14 Javascript
浅谈Webpack打包优化技巧
2018/06/12 Javascript
js实现简单的打印表格
2020/01/15 Javascript
js实现直播点击飘心效果
2020/08/19 Javascript
[02:46]完美世界DOTA2联赛PWL DAY4集锦
2020/11/03 DOTA
python将txt文档每行内容循环插入数据库的方法
2018/12/28 Python
Python实现12306火车票抢票系统
2019/07/04 Python
基于Pyinstaller打包Python程序并压缩文件大小
2020/05/28 Python
Python全局变量与global关键字常见错误解决方案
2020/10/05 Python
HTML5中新标签和常用标签详解
2014/03/07 HTML / CSS
澳大利亚领先的运动鞋商店:Hype DC
2018/03/31 全球购物
一些关于MySql加速和优化的面试题
2014/01/30 面试题
公司承诺书范文
2014/05/19 职场文书
计算机专业自荐信
2014/05/24 职场文书
行政经理岗位职责
2015/04/15 职场文书
学校教师培训工作总结
2015/10/14 职场文书