实现div根据鼠标的移动的透明度变化

最新推荐文章于 2021-06-12 21:10:58 发布

还没想好1234

最新推荐文章于 2021-06-12 21:10:58 发布

阅读量663

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/qq_33420835/article/details/82177754

版权

JS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

========》鼠标从div上移走

<style>
        #div1{
            background: Red;
            height: 200px;
            width: 200px;
           filter: alpha(opacity:100);
            opacity: 1;
        }
    </style>
    <script>
       window.onload=function () {
           var timer=null;
           var div1=document.getElementById("div1");
           function change(iTarget) {
               var alpha=30;
               clearInterval(timer);
               var speed=0;
               if(alpha>iTarget)
                   speed=-5;
               else
                   speed=5;
               timer=setInterval(function () {
                   if(alpha==iTarget)
                       clearInterval(timer);
                   else
                   {
                       alpha+=speed;
                       div1.style.filter='alpha(opacity:'+alpha+')';
                       div1.style.opacity=alpha/100;
                   }
               },300);
           }
           div1.onmouseover=function () {
               change(100);
           }
           div1.onmouseout=function () {
               change(20);
           }
       }
    </script>