JavaScript 特效之匀速动画

匀速动画

/**
 * 功能：匀速动画
 * 将传入的元素移动到目标位置
 * 此方法已经解决了元素起始位置位于目标位置的左侧和右侧时的处理办法不同的问题，传入目标位置的正负与其无关
 * 若以元素起始位置为原点，
 * 当target>0时，代表目标位置始终位于x轴正半轴
 * 当target<0时，代表目标位置始终位于x轴负半轴
 * @param ele 元素
 * @param target 目标位置
 */
function animate(ele,target){
    clearInterval(ele.timer);
    //谁的盒子绑定谁的定时器，把定时器作为属性绑定到box上
    ele.timer = setInterval(function () {
        var step = target>ele.offsetLeft ? 15:-15;
        //移动之前，先记录差值再判断，如果移动前就小于步长，那就让他白移动，我们直接赋值。解决抖动问题。
        var val = ele.offsetLeft-target;
        ele.style.left = ele.offsetLeft+step+"px";//注意一定要带单位px！！
        //到了没？如果不够一个步长，就不要继续走了
        if(Math.abs(val)<Math.abs(step)){
            ele.style.left = target + "px";//注意一定要带单位px！！
            clearInterval(ele.timer);
        }
    },10);
}