当前位置: 代码迷 >> 综合 >> 分享一个自己利用javascript中的window.setInterval()定时器实现页面背景图片淡入淡出效果
  详细解决方案

分享一个自己利用javascript中的window.setInterval()定时器实现页面背景图片淡入淡出效果

热度:28   发布时间:2024-01-13 01:09:15.0

window.setInterval()方法可不仅仅帮我们做一个定时器这么简单,可以利用它实现很多好玩有用的特效。

PS:

其实可以看出,图片并不是背景图片,只是利用了DIV中position: absolute;z-index:6px这个属性让这个DIV不是处在第0层的位置,效果就好像是背景图片一样。

图片的淡入淡出,其实是用到了滤镜filter:alpha(opacity=0);这个这个属性。opacity是设置透明度的。滤镜filter下还有一个shadow,用来显示阴影的。

 

一如既往的希望高手可以指点指点,本人感激不尽。废话不多说 代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>bgout.html</title><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="this is my page"><meta http-equiv="content-type" content="text/html; charset=UTF-8"><!--<link rel="stylesheet" type="text/css" href="./styles.css">--></head><body leftmargin="0px" topmargin="0px"> <div style="position: absolute;z-index:6px;width: 1366px;text-align: right"><img id="cz" alt="" src="bg.jpg" style="width: 1366px;height: 968px;filter:alpha(opacity=0)"></div></body><script type="text/javascript">var img=document.getElementById("cz");var i=0;var i_incr=5;function tmd(){if(i<=-5){i_incr=5;}if(i>=105){i_incr=-5;}i+=i_incr;img.style.filter="alpha(opacity="+i+")";}var timer;startBh();function startBh(){timer=window.setInterval("tmd()",100)}</script>
</html>

  相关解决方案