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

最新推荐文章于 2022-06-24 16:20:59 发布

陌隋

最新推荐文章于 2022-06-24 16:20:59 发布

阅读量1.8k

点赞数

分类专栏：学习心得文章标签： javascript stylesheet filter timer function div

本文链接：https://blog.csdn.net/lki_suidongdong/article/details/7879254

版权

学习心得专栏收录该内容

30 篇文章 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>