JS完美運動架構，js架構

JS完美運動架構，js架構

/*----------------------------------------------------------------------------

功能：  擷取某個節點下的所有ClassName為'sClass'的元素
輸入：  oParent:要擷取的class元素的父級節點
        sClass:要擷取的元素的class名稱
輸出：  擷取到的節點數組        
--------------------------------------------------------*/function getElementsByClassName(oParent, sClass){
var oEle = oParent.getElementsByTagName('*');
var result = [];
for (var i = 0; i < oEle.length; i++) {
if(oEle[i].className == sClass){
            result.push(oEle[i]); 
        }
    }
return result;
}

/*--------------------------------------------------------
功能：  擷取某個對象的屬性的具體數值
輸入：  obj:對象
        sName:屬性
輸出：  屬性值，注意透明度輸出最大為100，不是1
--------------------------------------------------------*/function getStyle(obj, sName){
var opacityFactor = 1;//如果是透明度屬性，值為100，其他屬性，值為1    if(sName == 'opacity'){
        opacityFactor = 100;
    }
if(obj.currentStyle){//IE        return parseFloat(obj.currentStyle[sName]) * opacityFactor;
    }else{//非IE        return parseFloat(getComputedStyle(obj, false)[sName]) * opacityFactor;
    }
}

/*--------------------------------------------------------
功能：  擷取json對象的長度
輸入：  json:json對象
輸出：  json對象的長度
--------------------------------------------------------*/function getJsonLength(json){
var jsonLength = 0;
for(var i in json){
        jsonLength++;
    }
return jsonLength;
}

/*--------------------------------------------------------
功能：  多個屬性值同時變化，可以變高，可以變低
輸入：  obj:要運動的對象
    property:屬性名稱，比如'height' : iTarget：運動結束之後的屬性值，比如1000。如果是透明度，100代表全透明。如：{width:100,height:300}
        endFunc(可選):運動結束之後執行的函數
輸出：    無
備忘：  如果是多物體，那麼每個物體都要添加一個全域的timer(定時器)屬性
--------------------------------------------------------*/function startMove(obj, json, endFunc){
    clearInterval(obj.timer);//清除定時器，解決對同一個定時器調用startMove定時器疊加的問題    var thisStyle = 0;//此時的樣式值    var speed = 0;//移動速度    var bStop = true;//假設，剛開始所有的屬性都達到了所設定的屬性值    var jsonLength = getJsonLength(json);
    obj.timer = setInterval(function(){  
/*        每次迴圈的時候，如果一個屬性的值達到設定的目標，則把i加1，        最後檢測如果i與json的長度一樣，說明每個屬性值都達到的目標，        則開啟定時器並執行endFunc        */        var i = 0;
for(var attr in json){          
            thisStyle = parseFloat(getStyle(obj, attr));
            speed = (json[attr] - thisStyle) / 5;  
            speed = speed>0 ? Math.ceil(speed) : Math.floor(speed);
if(speed >= 0 && thisStyle >= json[attr]){//從小往大變化的停止條件                  i++;
            }else if(speed <= 0 && thisStyle <= json[attr]){//從大往小變化的停止條件                i++            }else{//沒達到停止的條件，繼續運動                                       if(attr != 'opacity'){//如果不是設定透明度                    obj.style[attr] = thisStyle + speed + 'px';
                }else{//如果設定透明度                    obj.style[attr] = (thisStyle + speed) / 100 ;
                    obj.style.filter = 'alpha(opacity:' + (thisStyle + speed) + ')';
                }         
            }       
        }
if(i == jsonLength){
            clearInterval(obj.timer);
if(endFunc) {endFunc();}
        }  
    },30);
}