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 分号引起的一段调试问题
Jun 18 Javascript
Ext中下拉列表ComboBox组件store数据格式用法介绍
Jul 15 Javascript
javascript中CheckBox全选终极方案
May 20 Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
May 25 Javascript
关于获取DIV内部内容报错的原因分析及解决办法
Jan 29 Javascript
javascript实现根据汉字获取简拼
Sep 25 Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
Sep 20 Javascript
vue v-model动态生成详解
Jun 30 Javascript
jQuery实现的点击按钮改变样式功能示例
Jul 21 jQuery
es6 symbol的实现方法示例
Apr 02 Javascript
Bootstrap实现省市区三级联动(亲测可用)
Jul 26 Javascript
react中props 的使用及进行限制的方法
Apr 28 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扩展介绍与开发教程
2010/08/19 PHP
php设计模式 Delegation(委托模式)
2011/06/26 PHP
php导出word文档与excel电子表格的简单示例代码
2014/03/08 PHP
php访问数组最后一个元素的函数end()用法
2015/03/18 PHP
使用PHP编写发红包程序
2015/07/22 PHP
PHP魔术方法使用方法汇总
2016/02/14 PHP
图文详解phpstorm配置Xdebug进行调试PHP教程
2016/06/13 PHP
jquery 图片Silhouette Fadeins渐显效果
2010/02/07 Javascript
javascript标签在页面中的位置探讨
2013/04/11 Javascript
JavaScript prototype 使用介绍
2013/08/29 Javascript
javascript基本类型详解
2014/11/28 Javascript
jQuery实现跨域iframe接口方法调用
2015/03/14 Javascript
JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用
2016/09/19 Javascript
JavaScript中省略元素对数组长度的影响
2016/10/26 Javascript
Vue.js 2.5新特性介绍(推荐)
2017/10/24 Javascript
原生js滑动轮播封装
2020/07/31 Javascript
[37:22]DOTA2上海特级锦标赛D组资格赛#2 Liquid VS VP第一局
2016/02/28 DOTA
Python求两个list的差集、交集与并集的方法
2014/11/01 Python
详解Python 模拟实现生产者消费者模式的实例
2017/08/10 Python
Python实现获取前100组勾股数的方法示例
2018/05/04 Python
使用 Python 实现微信群友统计器的思路详解
2018/09/26 Python
解决使用PyCharm时无法启动控制台的问题
2019/01/19 Python
通过pycharm使用git的步骤(图文详解)
2019/06/13 Python
python3.7简单的爬虫实例详解
2019/07/08 Python
keras导入weights方式
2020/06/12 Python
Python 如何创建一个简单的REST接口
2020/07/30 Python
详解Css3新特性应用之过渡与动画
2017/01/10 HTML / CSS
HTML+CSS3 模仿Windows7 桌面效果
2010/06/17 HTML / CSS
lululemon美国官网:瑜伽服+跑步装备
2018/11/16 全球购物
this关键字的含义
2015/04/08 面试题
大学生就业推荐信范文
2013/11/29 职场文书
综治宣传月活动总结
2014/04/28 职场文书
春节超市活动方案
2014/08/14 职场文书
2014年企业员工工作总结
2014/12/09 职场文书
八年级英语教学计划
2015/01/23 职场文书
python中tkinter复选框使用操作
2021/11/11 Python