js實現多物體不同運動框架

歡迎各位親們賞臉觀看 * _ *

我們都知道，網站中有很多的運動，其需求不同，但大體結構類似。如果我們把每個功能模塊都寫出來，不僅浪費時間，而且浪費很多代碼空間，增加代碼冗餘，使代碼顯得雜亂無章。
今天我們就來寫一個框架，將不同的運動封裝成一個方法，讓不同的運動共用這一個方法，節省時間、空間。而且，這個框架一旦完成，無論何時想用，只要一個調用，就可以實現。
這個方法能實現的運動有變寬、變高、變字體大小、變透明度、變邊框等等，基本上給標籤添加的樣式，用這個方法都能讓他做出對應的改變。
下面就和我一起進入代碼空間吧，相信你一定會有很大的收穫-->

// 獲取當前樣式
function getStyle(obj, name){
    //解決獲取當前樣式在不同瀏覽器上的兼容問題
    if(obj.currentStyle){
        //IE7以下低版本瀏覽器
        return obj.currentStyle[name]
    }else{
        //火狐谷歌等高版本瀏覽器
        return getComputedStyle(obj, false)[name];
    }
}
var timer = null;//創建定時器
function startMove(obj, attr, target) {
    clearInterval(obj.timer);//清除舊定時器
    obj.timer = setInterval(function () {
        var curStyle = 0;
        //單獨處理透明度樣式
        if (attr == 'opacity') {
            curStyle = Math.round(parseFloat(getStyle(obj, attr)) * 100);
        } else {
            //除透明度以外，其他樣式
            curStyle = parseInt(getStyle(obj, attr));
        }
        //獲取當期速度，並將其取整，避免不能精準到達指定位置
        var speed = (target - curStyle) / 6;
        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

        if (curStyle == target) {
            clearInterval(timer);//到達位置停止定時器
        } else {
            if (attr == 'opacity') {//改變透明度的樣式
                obj.style.filter = 'alpha(opacity:' + (curStyle + speed) + ')';
                obj.style.opacity = (curStyle + speed) / 100;
            } else {//改變除透明度以外的其他樣式
                obj.style[attr] = curStyle + speed + 'px';
            }
        }
    });
}

以上代碼基本上適合所有運動，只要調用startMove方法，並給他傳上參數，就能實現你想要的簡單運動。

有興趣的小夥伴抓緊試試吧 ! =_=