js 点击div运动动画传参 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    *{padding:0;margin:0;}
    li{list-style:none;}
    div{width:100px;height:100px;background:red;position:absolute;left:20px;top:20px;}
</style>
<script>
    window.onload=function() {
        var oInp=document.getElementsByTagName('input');
        var oDiv=document.getElementsByTagName('div')[0];

        oInp[0].onclick=function(){fn2(oDiv,'top',20,500,function(){
            fn2(oDiv,'left',20,300,function(){
                fn2(oDiv,'top',20,20,function(){
                    fn2(oDiv,'left',20,20)
                })
            })
        })}
        function fn2(obj,attr,num2,num1,endfn){
            num2=parseInt(fn1(obj,attr)) <num1?num2:-num2;
              clearInterval(this.timer);
               timer=setInterval(function(){
            var speed=parseInt(fn1(obj,attr))+num2;
                if(speed>num1 && num2>0 || speed<num1 && num2<0){speed=num1;}
                   obj.style[attr]=speed+'px';
                   if(speed==num1){clearInterval(this.timer);endfn&&endfn()}
               },50);
            function fn1(obj,attr){return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,22)[attr];}
        }
    }
</script>
<body>
<input type="button" value="后">
<div></div>
</body>
</html>

posted on 2021-10-26 22:14  完美前端  阅读(87)  评论(0)    收藏  举报

导航