js学习总结----实现多方向匀速运动动画

具体代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box{
            width:200px;
            height:200px;
            position: absolute;
            top:0;
            left:0;
            background:lightblue;
        }
    </style>
</head>
<body>
    <div id='box'></div>
    <script>
        function Linear(t,b,c,d){
            return c*t/d+b
        }
        var oBox = document.getElementById("box");
        var beginLeft = utils.css(oBox,"left"),beginTop = utils.css(oBox,"top")
        var targetLeft = 1000,targetTop = 500;
        var changeLeft = targetLeft - beginLeft,changeTop = targetTop - beginTop;
        var duration = 1000,time = 0;
        oBox.timer = window.setInterval(function(){
            time+=10;
            if(time>=duration){
                utils.css(oBox,{
                    left:targetLeft,
                    Top:targetTop,
                })
                window.clearInterval(oBox.timer);
                return;
            }
            var curLeft = Linear(time,beginLeft,changeLeft,duration);
            var curTop = Linear(time,beginTop,changeTop,duration);
            utils.css(oBox,{
                left:curLeft,
                Top:curTop,
            })
        },10)
        

    </script>
</body>
</html>

 

posted @ 2017-07-13 15:09  diasa  阅读(351)  评论(0)  编辑  收藏  举报