运动函数的封装

一、运动函数的封装

div向右运动：div的在当前位置的基础上每次向右移动一定的距离，到指定位置停止

​ 取出每次一次位移前div的位置+偏移量

div向左运动：div在当前位置基础上每次都向左移动指定距离 (当前位置-偏移量)

运动函数的封装：

​ 将整个运动的实现代码放入一个函数中,将运动函数中变化的量(值不确定的，随着应用场景会发生改变的量)提取为参数，例如：位移的目标对象、每次位移的距离、停止的位置、发生变化的属性

/*
   功能：向右移动
   参数：
     @obj     目标物体
     @prop    参与运动的属性
     @step    每次移动的距离
     @target  终点位置
 */
function move(obj, prop, step, target) {
    var preTar = parseFloat(getStyle(obj, prop));//初始位置
    //判断起点和终点的位置关系 决定 step的正负
    step = preTar > target ? -step : step;//
    clearInterval(obj.timer);//清除当前正在起作用的定时器，
    //启动新定时器
    obj.timer = setInterval(function () {
        //思路：div的新位置=取出当前div的位置，在当前位置基础上加位移的距离     
        var speed = parseFloat(getStyle(obj, prop)) + step;// '50px'+5
        //判断当前的位置和终点位置的关系   判断方向

        //preTar>target  初始位置>终点位置    向左
        //preTar<target  初始位置<终点位置    向右
        //if(向右&&到达终点 || 向左&&到达终点)
        if (speed >= target && step > 0 || speed <= target && step < 0) {
            clearInterval(obj.timer);
            speed = target;//到达终点之后，
        }
        obj.style[prop] = speed + "px";
    }, 10);
}