任意值运动框架

秒速五厘米 2022-07-14 11:18 201阅读 0赞

<!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>