具體代碼以下: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: 運動結束後的回調函數框架
此框架能夠實現多個參數,多個物體運動互不影響。函數