定时器应用——封装移动动画函数

moveElement：要移动的节点对象
targetLeft：移动的目标位置

封装匀速移动动画函数

 function moveAnimated(moveElement,targetLeft) {
            // 先清理定时器，防止定时器累加，速度越来越快
            clearInterval(moveElement.timeId);
            //每次的点击操作都只产生一个定时器，定时器的id值存储到一个对象的属性中
            moveElement.timeId=setInterval(function () {
                // 获取div当前left值
                var currentLeft=moveElement.offsetLeft;
                //设置每次移动一次的距离------步数
                var step=7;
                //判断移动的方向
                step=currentLeft<targetLeft?step:-step;
                // 每次移动后的位置
                currentLeft+=step;
                // 判断当前移动后的位置是否达到目标位置
                if(Math.abs(targetLeft-currentLeft)>Math.abs(step)){
                    moveElement.style.left=currentLeft+"px";
                }else{
                    //到达目标位置则清理定时器
                    clearInterval(moveElement.timeId);
                    moveElement.style.left=targetLeft+"px";
                }
            },20)
        }

封装变速移动动画函数

 function moveAnimated(moveElement,targetLeft) {
        // 先清理定时器，防止定时器累加，速度越来越快
        clearInterval(moveElement.timeId);
        //每次的点击操作都只产生一个定时器，定时器的id值存储到一个对象的属性中
        moveElement.timeId=setInterval(function () {
            // 获取div当前left值
            var currentLeft=moveElement.offsetLeft;
            //设置每次移动一次的距离------步数
            var step=(targetLeft-currentLeft)/10;
            // 正数则向上取整，负数则向下取整
            step=step>0?Math.ceil(step):Math.floor(step);
            // 每次移动后的位置
            currentLeft+=step;
            moveElement.style.left=currentLeft+"px";
            if(currentLeft==targetLeft){
                //到达目标位置则清理定时器
                clearInterval(moveElement.timeId);
            }
            //测试代码
            console.log("目标位置："+targetLeft+"，当前位置："+currentLeft+",移动步数："+step);
        },20)
    }