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 相关文章推荐
基于jquery1.4.2的仿flash超炫焦点图播放效果
Apr 20 Javascript
DOM Scripting中的图片切换[兼容Firefox]
Jun 12 Javascript
jQuery UI Datepicker length为空或不是对象错误的解决方法
Dec 19 Javascript
HTML DOM的nodeType值介绍
Mar 31 Javascript
详解JavaScript函数绑定
Aug 18 Javascript
jQuery实现表格行上移下移和置顶的方法
May 22 Javascript
JS实现网页顶部向下滑出的全国城市切换导航效果
Aug 22 Javascript
jQuery CSS3自定义美化Checkbox实现代码
May 12 Javascript
浅析JavaScript 箭头函数 generator Date JSON
May 23 Javascript
AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
Jan 21 Javascript
浅谈Koa2框架利用CORS完成跨域ajax请求
Mar 06 Javascript
JSON数据中存在单个转义字符“\”的处理方法
Jul 11 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下escape解码函数的实现方法
2010/08/08 PHP
PHP 读取Postgresql中的数组
2013/04/14 PHP
php事务处理实例详解
2014/07/11 PHP
php限制文件下载速度的代码
2015/10/20 PHP
详解WordPress中提醒安装插件以及隐藏插件的功能实现
2015/12/25 PHP
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
2015/02/11 Javascript
javascript中闭包(Closure)详解
2016/01/06 Javascript
js+canvas绘制五角星的方法
2016/01/28 Javascript
Highcharts学习之坐标轴
2016/08/02 Javascript
jQuery实现的简单在线计算器功能
2017/05/11 jQuery
Vue2.0利用vue-resource上传文件到七牛的实例代码
2017/07/28 Javascript
javascript实现获取一个日期段内每天不同的价格(计算入住总价格)
2018/02/05 Javascript
微信小程序中使用echarts的实现方法
2019/04/24 Javascript
JS使用setInterval计时器实现挑战10秒
2020/11/08 Javascript
Python pass 语句使用示例
2014/03/11 Python
Python selenium 三种等待方式解读
2016/09/15 Python
对python中list的拷贝与numpy的array的拷贝详解
2019/01/29 Python
python性能测量工具cProfile使用解析
2019/09/26 Python
flask框架url与重定向操作实例详解
2020/01/25 Python
Python3 shutil(高级文件操作模块)实例用法总结
2020/02/19 Python
使用Python+selenium实现第一个自动化测试脚本
2020/03/17 Python
浅谈keras中自定义二分类任务评价指标metrics的方法以及代码
2020/06/11 Python
JSP和Servlet有哪些相同点和不同点,他们之间的联系是什么?
2015/10/22 面试题
十八大闭幕感言
2014/01/22 职场文书
实习会计求职自荐信范文
2014/03/10 职场文书
商学院大学生求职的自我评价
2014/03/12 职场文书
公司领导九九重阳节发言稿2014
2014/09/25 职场文书
四风问题查摆剖析材料
2014/10/11 职场文书
招商引资工作汇报材料
2014/10/28 职场文书
感谢信怎么写
2015/01/21 职场文书
玄武湖导游词
2015/02/05 职场文书
聘任书格式及范文
2015/09/21 职场文书
小学语文国培研修日志
2015/11/13 职场文书
通知怎么写?
2019/04/17 职场文书
MySql 8.0及对应驱动包匹配的注意点说明
2021/06/23 MySQL
微前端qiankun改造日渐庞大的项目教程
2022/06/21 Javascript