JS运动之实现图片的淡入淡出

最新推荐文章于 2022-01-20 18:30:13 发布

曲奇小姐

最新推荐文章于 2022-01-20 18:30:13 发布

阅读量271

点赞数

分类专栏： Javascript

本文链接：https://blog.csdn.net/weixin_41586886/article/details/80684761

版权

Javascript 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>图片淡入淡出</title>
    <style>
    #div1{
      width: 200px;
      height: 200px;
      background: red;
      /* 透明度，兼容IE： */
      filter:alpha(opacity:30);
      /* 透明度，兼容FF和chorme： */
      opacity: 0.3;
    }
    </style>
    <script type="text/javascript">
    window.οnlοad=function(){
      var oDiv=document.getElementById('div1');
      oDiv.οnmοuseοver=function(){
        startMove(100);
      };
      oDiv.οnmοuseοut=function(){
        startMove(30);
      };
    };
      var timer=null;
      var alpha=30;   //用来放透明度的数值
      function startMove(iTarget){
        var oDiv=document.getElementById('div1');
        var speed=0;   //用来放速度及方向
        if(alpha<iTarget){  //用于判断是应该淡入还是淡出
          speed=2;
        }
        else{
          speed=-2;
        };
        clearInterval(timer);
        timer=setInterval(function(){
          if(alpha==iTarget){  //判断定时器应该做怎么的操作
            clearInterval(timer);
          }
          else{
            alpha=alpha+speed;
            oDiv.style.filter='alpha(opacity:'+alpha+')';  //兼容IE
            oDiv.style.opacity=alpha/100; //兼容FF和Chrome
          };
        },30);
      }

    </script>
  </head>
  <body>
    <div id='div1'></div>
  </body>


</html>

曲奇小姐

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS运动之实现图片的淡入淡出

&lt;!DOCTYPE html&gt;&lt;html lang="en" dir="ltr"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;图片淡入淡出&lt;/title&gt; &lt;style&gt; #div1{
复制链接

扫一扫

专栏目录