JS运动框架

代码来自慕课网教程

function starMove(obj, attr, target) {
    clearInterval(obj.timer);


    obj.timer = setInterval(function () {

        var incur = parseInt(getStyle(obj, attr));

        var speed = (target - incur) / 10;
        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed)

        if (incur == target) {
            clearInterval(obj.timer);
        }
        else {
            obj.style[attr] = incur + speed + 'px';
        }
    }, 30)
}

function getStyle(obj, attr) {
    if (obj.currentStyle) {
        return obj.currentStyle[attr];
    }
    else{
        return getComputedStyle(obj,false)[attr];
    }

}

这并不是最完美的框架因为还没有加入对透明度的兼容性以及链式反应

框架要点

先获得需要改变的对象和JS中CSS的属性名

先清楚已经在这个Obj上的计时器（防止多次移入鼠标时计时器叠加）

通过getstyle方法获得当前属性的静态属性

然后计算速度：如果目标大于当前属性位置，则速度为正，并用Math.ceil()方法将向上round为整数以便浏览器能够继续计算他的属性值（因为浏览器不接受小数的像素值），反之速度为负，用Math.floor()函数

然后判断，如果当前属性位置已经到达target则清除计时，如果没有达到，则通过obj.style获取当前属性并更新属性值