变速动画封装函数

作者: 小透明进击战 | 来源:发表于2019-06-11 19:04 被阅读0次

变速动画封装函数
JS.封装好的运动函数
JavaScript四 - 动画
32 动画函数封装
基本网页特效（二）
简单动画原理封装
12.动画函数封装、节流阀、轮播图、筋头云案例
轮播图
WebAPIs-动画
JS基础学习:移动元素/第二种定时器/渐变案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #dv {
            width: 200px;
            height: 100px;
            background-color: khaki;
            margin-top: 20px;
            position: absolute;
            top: 20px;
            left: 0;
        }
    </style>
</head>
<body>
<input type="button" value="移动到400px" id="btn1"/>
<input type="button" value="移动到800px" id="btn2"/>
<div id="dv">
</div>
<script src="../common.js"></script>
<script>
    function changeMove(element,target){
        //首先清理定时器
        clearInterval(element.timeid);
        element.timeid=setInterval(function(){
            //获取当前位置
            var current=element.offsetLeft;
            //设置移动步数
            var step=(target-current)/10;
            //如果步数是正数向上取整，如果是负数，向下取整
            step=step>0?Math.ceil(step):Math.floor(step);
            //移动公式
            current+=step;
            element.style.left =current+"px";
            //如果到目的地清理定时器
            if(current==target){
                clearInterval(element.timeid);
            }
            //添加测试代码
            console.log(current+"px=============="+target+"px============="+step+"px");
        },50);

    }
    my$("btn1").onclick=function(){
        changeMove(my$("dv"),400);
    };
    my$("btn2").onclick=function(){
        changeMove(my$("dv"),800);
    };

</script>

</body>
</html>

变速动画.png