move.js

'use strict';
/**
 * 获取CSS
 */
function getStyle(obj, attr) {
    return (obj.currentStyle || getComputedStyle(obj, false))[attr];
}

/**
 * JS动画框架 
 */
function move(obj, json, options) {
    if (!obj) return;
    json = json || {};
    options = options || {};
    options.speed = options.speed || 700;
    options.easing = options.easing || 'linear';

    var n = 0,
        c = Math.ceil(options.speed / 30),
        s = {},
        d = {};

    for (var i in json) {
        s[i] = parseFloat(getStyle(obj, i));

        if (isNaN(s[i])) {
            switch (i.toLowerCase()) {
                case 'width':
                    s[i] = obj.offsetWidth;
                    break;
                case 'height':
                    s[i] = obj.offsetHeight;
                    break;
                case 'left':
                    s[i] = obj.offsetLeft;
                    break;
                case 'top':
                    s[i] = obj.offsetTop;
                    break;
                case 'opacity':
                    s[i] = 1;
                    break;
                case 'borderWidth':
                    s[i] = 0;
                    break;
            }
        }

        d[i] = parseFloat(json[i]) - s[i];
    }

    var a,
        b,
        go = function () {
            n ++;
            for (var i in json) {
                switch (options.easing.toLowerCase()) {
                    case 'linear':
                        b = d[i] * n / c + s[i];
                        break;
                    case 'ease-in':
                        a = n / c;
                        b = d[i] * (1 - Math.pow(a, 3)) + s[i];
                        break;
                    case 'ease-out':
                        a = 1 - n / c;
                        b = d[i] * (1 - Math.pow(a, 3)) + s[i];
                        break;
                }
                if ('opacity' === i) {
                    obj.style[i] = b;
                    obj.style.filter = 'alpha(' + i + ' = ' + b * 100 + ')';
                }
                else {
                    obj.style[i] = b + 'px';
                }
            }

            if (n === c) {
                options.fn && (typeof options.fn === 'function') && options.fn.call(obj);
            }
            else {
                clearTimeout(obj.timer);
                obj.timer = setTimeout(go, 30);
            }
        };
    go();
}