Javascript原生代码——动画封装：匀速、缓速及升级

      在web网页设计中，经常要使用到动画（如轮播图、随滚动窗口移动的广告栏等等），封装动画会节省很多代码，也让结构更简单清晰。这里先封装了一个匀速移动的动画和一个缓速移动的动画（通过offsetLeft/offsetTop来左右上下移动），然后逐渐深入下去。

匀速动画

ele为要移动的盒子，target为目标位置（像素），spd为计数器的频率

function animate1(ele,target,spd){
        //要用定时器，先清除定时器，一个盒子只能有一个定时器，这样的话，不会和其他盒子出现定时器冲突
        //而定时器本身将成为盒子的一个属性
        clearInterval(ele.timer);
        //我们要求盒子既能向前又能向后，那么我们的步长就得有正有负
        //目标值如果大于当前值取正，目标值如果小于当前值取负
        var speed = target>ele.offsetLeft?10:-10;
        ele.timer = setInterval(function () {
            //在执行之前就获取当前值和目标值之差
            var val = target - ele.offsetLeft;
            ele.style.left = ele.offsetLeft + speed + "px";
            //目标值和当前值只差如果小于步长，那么就不能前进了
            //因为步长有正有负，所有转换成绝对值来比较
            if(Math.abs(val)<Math.abs(speed)){
                ele.style.left = target + "px";
                clearInterval(ele.timer);
            }
        },spd)

    }

 

缓速动画（先快后慢）

ele为要移动的盒子，target为目标位置（像素），spd为计数器的频率

function animate2(ele,target,spd) {
        //要用定时器，先清定时器
        clearInterval(ele.timer);
        //定义定时器
        ele.timer = setInterval(function () {