缓动动画函数封装

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        #demo{
            100px;
            height:100px;
            background-color: pink;
            position:absolute;
            top:50px;
            left:0;
        }
    </style>
</head>
<body>
<button id="btn300">300</button>
<button id="btn600">600</button>
<div id="demo"></div>
</body>
</html>
<script>
    var btn300=document.getElementById("btn300");
    var btn600=document.getElementById("btn600");
    var demo=document.getElementById("demo");
    btn300.onclick=function () {
        run(demo,300);
    }
    btn600.onclick=function () {
        run(demo,600);
    }

    //封装函数
    var timer=null;
    function run(obj,target)  //第一个参数，谁动（做动画的对象），第二个参数，动多少（目标位置）
    {
        clearInterval(timer);
        obj.timer=setInterval(function(){
            var step=(target-obj.offsetLeft)/10;
            step=step >0 ? Math.ceil(step) : Math.floor(step);
            obj.style.left=obj.offsetLeft+step+"px";
            if(obj.offsetLeft==target)
            {
                clearInterval(obj.timer);
            }
        },10)
    }
</script>

动画函数给不同元素记录不同定时器：

obj.timer

如果多个元素都使用这个动画函数，每次都要 var 声明定时器，我们可以给不同的元素使用不同的定时器

核心原理：利用JS是一门动态语言，可以很方便的给当前对象添加属性

缓动动画函数封装

相关推荐