多用途運動框架

該運動框架能夠用於改變寬度、高度、字體大小、透明度、Left、top等值

 

先上一個獲取真正樣式的函數

//定義getStyle函數，獲取真正樣式
function getStyle(obj,attr){
    if(obj.currentStyle){//兼容IE
        return obj.currentStyle[attr];
    }else if(window.getComputedStyle(obj,false)){//兼容FF
        return getComputedStyle(obj,false)[attr]; 
    };
};

 

而後上都是主體部分：

//參數爲對象，屬性，目標值
function move(obj,json,fnEnd){
    clearInterval(obj.timer);
    
    obj.timer = setInterval(startmove,30);
    
    function startmove(){
        var bBtn = true;  //定義開關，初始值爲真，若是所有屬性達到目標值，則清除定時器
        
        for(var attr in json){  //循環json，處理沒一個JSON屬性值
            var iSpeed,iCur=0;
        
            if(attr == "opacity"){
                iCur = Math.round(parseFloat(getStyle(obj,attr)) * 100); // 若是傳入的屬性是透明度，則轉換爲百分制
            }else{
                iCur = Math.round(parseFloat(getStyle(obj,attr)));//獲取當前屬性的真正值
            };
            iSpeed = (json[attr]  - iCur) / 8;
            iSpeed = (iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed)); // 當速度大於0是向上取整，小於0向下取整

            if(iCur != json[attr]){
                bBtn = false;
            }
            if(attr == "opacity"){
                obj.style.opacity =  (iCur + iSpeed)/100; 
                obj.style.filter = "alpha(opacity:" + iCur + iSpeed + ")";            
            }else{
                obj.style[attr] = iCur + iSpeed + "px";
            };
        };
        if(bBtn){
            clearInterval(obj.timer);
            if(fnEnd){
                fnEnd.call(obj);
            };                
        };
    };
    
};