封装多元素多属性的链式缓冲

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{box-sizing: border-box;}
            #box1{width: 900px;height: 150px;border: 1px solid black;position: relative;}
            #box2{width: 900px;height: 150px;border: 1px solid black;position: relative;margin-top: 10px;}
            #obox1{width: 100px;height: 100px;background-color: red;margin-top: 25px;position: absolute;left: 0;top: 0;}
            #obox2{width: 100px;height: 100px;background-color: red;margin-top: 25px;position: absolute;left: 0;top: 0;}
        </style>
    </head>

    <body>
        <div id="box1">
            <div id="obox1">

            </div>
        </div>
        <div id="box2">
            <div id="obox2">

            </div>
        </div>
    </body>
    <script type="text/javascript">
        var box1 = document.querySelector("#box1");
        var box2 = document.querySelector("#box2");
        var obox1 = document.querySelector("#obox1");
        var obox2 = document.querySelector("#obox2");
        box1.onmouseenter = function(){;
            move(obox1,{left:600,top:150},function(){
                alert("结束了")
            })
        }
        box1.onmouseleave = function(){;
            move(obox1,{left:0,top:10})
        }
        box2.onmouseenter = function(){;
            move(obox2,{left:0,top:300})
        }
        box2.onmouseleave = function(){;
            move(obox2,{left:0,top:10})
        }
        
        function move (ele,obj,callback){
            
            clearInterval(ele.t);
            ele.t = setInterval(function(){
                var onoff = true;
                for(var i in obj){
                var now = parseInt(getStyle(ele,i));
                speed = (obj[i]-now)/7;
                speed = speed>0? Math.ceil(speed):Math.floor(speed);
                if(obj[i]!=now){
                    onoff = false;
                
                }
                ele.style[i]=now+speed+"px";
                        
                }
                if(onoff){
                    clearInterval(ele.t);
                    //如果没有实参传入,会显示undefined,则不执行,去过有实参传入,会执行实参
                    callback && callback();
                }
            },30)
            
        }
        
        function getStyle(ele,attr){
    if(ele.currentStyle){
        return ele.currentStyle[attr];
    }else{
        return getComputedStyle(ele,false)[attr];
    }
}
    </script>
        
</html>
封装多元素多属性的链式缓冲

猜你喜欢
