js 運動框架-輕量級

  具體代碼以下:json

  

function move(obj,json,sv,fnEnd){
    //CSS樣式值
    function getStyle(obj,attr){
        if(obj.currentStyle) {return obj.currentStyle[attr];}
        else {return getComputedStyle(obj,false)[attr];}
    }
    //運動         
    clearInterval(obj.timer);
    obj.timer=setInterval(function(){
        var isAllCompleted=true; //假設所有運動都完成了
        for(attr in json){
        var attrValue=0;
            switch(attr){
                case 'opacity':
                attrValue=Math.round(parseFloat(getStyle(obj,attr))*100);break;
                default:
                attrValue=parseInt(getStyle(obj,attr));
            }
            //默認速度4
            var speed=(json[attr]-attrValue)/(sv||4); 
            speed=speed>0?Math.ceil(speed):Math.floor(speed);
            //若是循環過程當中存在還沒有結束的運動,isAllCompleted爲假
            if(attrValue!=json[attr]) isAllCompleted=false; 
            switch(attr){
                case 'opacity': {
                    obj.style.filter="alpha(opacity="+(attrValue+speed)+")";
                    obj.style.opacity=(attrValue+speed)/100;
                }; break;
                default:obj.style[attr]=attrValue+speed+'px';
            }                   
        }//for in end!
        //全部循環結束後,只有當所有運動結束後(isAllCompleted=true)時才關閉定時器
        if(isAllCompleted){ 
            clearInterval(obj.timer);
            if(fnEnd) fnEnd();
        }   
    },30);
}

  運動框架move(obj,propertiesJson,speed,fnCallBack)
    obj: 運動物體
    propertiesJson: 運動屬性和運動目標值的json集合,{'opacity':100}
    speed: 運動的速度,speed-value,值越小速度越大
    fnCallBack: 運動結束後的回調函數框架

  此框架能夠實現多個參數,多個物體運動互不影響。函數

相關文章
相關標籤/搜索