任意值运动框架

最新推荐文章于 2020-11-25 15:33:49 发布

原创最新推荐文章于 2020-11-25 15:33:49 发布 · 453 阅读

0 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

49 篇文章

订阅专栏

本文介绍了一个使用纯CSS实现的透明度渐变动画效果，并通过JavaScript增强了交互体验，当鼠标悬停在元素上时，该元素的透明度会平滑过渡到完全可见状态。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style>
      div{
         width:200px;
         height:200px;
         background-color:red;
         margin-top:50px;
         filter:alpha(opacity:30);
         opacity: 0.3;
      }
   </style>
   <script>
        function getStyle(obj,attr) {
            if(obj.currentStyle){
                return obj.currentStyle[attr];
            }else{
                return getComputedStyle(obj,false)[attr];
            }
        }
        window.onload=function () {
            var oDiv=document.getElementsByTagName('div');
            for(var i=0; i<oDiv.length;i++){
                oDiv[i].timer=null;
               oDiv[i].onmouseover=function(){
                   startMove(this,'opacity',100)
            };
                oDiv[i].onmouseout=function(){
                    startMove(this,'opacity',30)
                }
            };
            function startMove(obj,attr,target) {
                clearInterval(obj.timer);
                obj.timer=setInterval(function () {
                    var iCur=0;
                    if(attr=='opacity'){
                        iCur=parseInt(parseFloat(getStyle(obj,attr)*100));
               }else{
                  iCur=parseInt(getStyle(obj,attr));
               }
                    var speed=(target-iCur)/8;
                    speed=speed>0?Math.ceil(speed):Math.floor(speed);
                    if(iCur==target){
                        clearInterval(obj.timer);
                    }else{
                        if(attr=='opacity'){
                            obj.style.filter='alpha(opacity:'+(iCur+speed)+')';
                            obj.style.opacity=(iCur+speed)/100;
                  }else{
                            obj.style[attr]=iCur+speed+'px';
                  }
                    };
                },30)
            };
        }
   </script>
</head>
<body>
   <div></div>
</body>
</html>