Javascript——变速动画函数封装

最新推荐文章于 2020-08-21 20:07:18 发布

mintsolace

最新推荐文章于 2020-08-21 20:07:18 发布

阅读量226

点赞数

分类专栏：学习笔记 javascript 文章标签： javascript

本文链接：https://blog.csdn.net/mintsolace/article/details/96909655

版权

学习笔记同时被 2 个专栏收录

128 篇文章 2 订阅

订阅专栏

javascript

56 篇文章 0 订阅

订阅专栏

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            margin-top: 20px;
            width: 200px;
            height: 100px;
            background-color: green;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
......
<input type="button" value="移动到400px" id="btn1" />
<input type="button" value="移动到800px" id="btn2" />
<div id="dv">
<script src="common.js"></script>
    <script>
        //点击按钮移动div
        my$("btn1").onclick=function(){
        animate(my$("dv"),400);
        };
        my$("btn2").onclick=function(){
        animate(my$("dv"),800);
        };
     
        function animate(element,target){
            //清理定时器
            clearInterval(element.timeId);
            element.timeId=setInterval(function(){
                //获取元素当前位置
                var current=element.offsetLeft;
                //移动的步数
                var step=10;
                step=target>current?step: -step;
                current+=step;
                if(Math.abs(current-target)>Math.abs(step)){
                    element.style.left=current+"px";
                }else{
                    clearInterval(element.timeId);
                    element.style.left=target+"px";
                }
            },20);
        }
    </script>
</div>

封装变速动画

        匀速动画
        function animate(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("目标位置:"target+,当前位置: "+current+",每次移动步数:"+step");
            },20);
        }