自己封装简单的运动效果

/**
 * 运动函数简单封装
 * @param obj   要操作的对象
 * @param json  存放要改变的属性和目标值
 * @param fn    回调函数,在前面的运动效果执行完之后,才回执行的函数
 */
function motion(obj, json,fn) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        // 当开关变量结果为true时,表示所有动作执行完毕,可以停止定时器,调用回调函数了
        var onOff = true;
        for ( var attr in json ){
            var current = null;
            // 获取当前值
            if (attr = "opacity") {
                current = parseInt(getStyle(obj, attr)) * 100;
            } else {
                current = parseInt(getStyle(obj, attr));
            };
            // 计算速度
            var speed = ( json[attr] - current ) / 7;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
            // 如果目标值和当前值不相等  继续for循环
            if (json[attr] != current) {
                flag = false;
            };
            if (attr = "opacity") {
                obj.style.opacity = ( current + speed ) / 100;
                obj.style.filter = "alpha(opacity = " + ( current + speed ) + ")";
            } else if (attr == "zIndex"){
                obj.style.zIndex = json[attr];
            }else {
                obj.style[attr] = current + speed + "px";
            };
        };
        // 判断开关变量的停止条件
        if( onOff ){
            clearInterval(obj.timer);
            if (fn) {
                fn();
            };
        };
    }, 50);};
/**
 * 获取非行内CSS样式
 * @param obj   要获取的对象
 * @param attr  要获取的属性
 * @returns {Number}
 */
function getStyle(obj, attr) {
    if (window.getComputedStyle) {
        return window.getComputedStyle(obj.false)[attr];
    } else {
        return obj.currentStyle[attr];
    };
};

你可能感兴趣的:(自己封装简单的运动效果)