js特效01缓动函数封装

缓动函数封装

<script>
    var timer=null;
    var btn1=document.getElementById('btn1');
    var btn2=document.getElementById('btn2');
    var demo=document.getElementById('demo');
    btn1.onclick=function () {
        animate(demo,200);
        };
    btn2.onclick=function () {
        animate(demo,400);
        };
    //封装缓动函数 能够让任意对象移动到指定位置的动画函数
    function animate(obj,target){
        clearInterval(obj.timer);
        obj.timer=setInterval(function() {
        var leader=demo.offsetLeft;//offsetLeft获取的是就近取整。所以问题是走不到400的位置就停下来了。可以修改step的值来解决。
        var step=(target-leader)/10;
        step=step>0?Math.ceil(step):Math.floor(step);//步长向上取整。
        leader=leader+step;
        demo.style.left=leader+"px";
    //console.log("target"+target+"leader"+leader+"step"+step);
        if (leader===target) {
            clearInterval(timer);
        }
        },15);
    }
</script>

案例需求：