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 相关文章推荐
JavaScript中的其他对象
Jan 16 Javascript
THREE.JS入门教程(2)着色器-上
Jan 24 Javascript
jQuery用unbind方法去掉hover事件及其他方法介绍
Mar 18 Javascript
javascript数组快速打乱重排的方法
Jan 02 Javascript
$.each与$().each的区别示例介绍
Mar 20 Javascript
javascript内置对象操作详解
Feb 04 Javascript
jQuery实现行文字链接提示效果的方法
Mar 10 Javascript
JavaScript操作Cookie方法实例分析
May 27 Javascript
浅析location.href跨窗口调用函数
Nov 22 Javascript
canvas实现环形进度条效果
Mar 23 Javascript
浅谈Vue父子组件和非父子组件传值问题
Aug 22 Javascript
微信小程序实现卡片层叠滑动效果
Jun 21 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实现文件编码批量转换
2014/03/10 PHP
PHP实现的注册,登录及查询用户资料功能API接口示例
2017/06/06 PHP
JavaScript 异步调用框架 (Part 1 - 问题 &amp; 场景)
2009/08/03 Javascript
Dom操作之兼容技巧分享
2011/09/20 Javascript
关于递归运算的顺序测试代码
2011/11/30 Javascript
基于JQuery的抓取博客园首页RSS的代码
2011/12/01 Javascript
jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法
2015/08/07 Javascript
下雪了 javascript实现雪花飞舞
2020/08/02 Javascript
微信小程序图片轮播组件gallery slider使用方法详解
2018/01/31 Javascript
基于IView中on-change属性的使用详解
2018/03/15 Javascript
使用angular-cli webpack创建多个包的方法
2018/10/16 Javascript
使用vue2实现带地区编号和名称的省市县三级联动效果
2018/11/05 Javascript
JS继承实现方法及优缺点详解
2020/09/02 Javascript
js实现简易拖拽的示例
2020/10/26 Javascript
[04:13]2014DOTA2国际邀请赛 专访DC目前形势不容乐观
2014/07/12 DOTA
[01:38:19]夜魇凡尔赛茶话会 第五期
2021/03/11 DOTA
python模拟鼠标拖动操作的方法
2015/03/11 Python
使用Python进行AES加密和解密的示例代码
2018/02/02 Python
Django后台管理系统的图文使用教学
2020/01/20 Python
详解django中Template语言
2020/02/22 Python
Python编程快速上手——强口令检测算法案例分析
2020/02/29 Python
Python+OpenCV图像处理——实现直线检测
2020/10/23 Python
全球最大的房车租赁市场:Outdoorsy
2018/09/19 全球购物
澳大利亚领先的时尚内衣零售商:Bras N Things
2020/07/28 全球购物
网上常见的一份Linux面试题(多项选择部分)
2015/02/07 面试题
个人找工作求职简历的自我评价
2013/10/20 职场文书
40岁生日感言
2014/02/15 职场文书
挂科检讨书范文
2014/02/20 职场文书
办公自动化专业大学生职业规划书
2014/03/06 职场文书
公司节能减排倡议书
2014/05/14 职场文书
预备党员入党感言
2015/08/01 职场文书
公文写作:教你写“建议书”
2019/05/07 职场文书
redis客户端实现高可用读写分离的方式详解
2021/07/04 Redis
Nginx 反向代理解决跨域问题多种情况分析
2022/01/18 Servers
python 离散点图画法的实现
2022/04/01 Python
海弦WR-800F
2022/04/05 无线电