標籤:int 位置 函數 als floor 回調 round else for
之前經常寫運動函數,要寫好多好多,後來想辦法封裝起來。(運動緩衝)。
1 /* 2 物體多屬性同時運動的函數 3 obj:運動的物體 4 oTarget:對象,屬性名稱為運動的樣式名,屬性值為樣式運動的終點值 5 ratio:速度的係數 6 */ 7 function bufferMove(obj, oTarget, fn,ratio = 8) { 8 clearInterval(obj.iTimer); 9 obj.iTimer = setInterval(function () {10 // 此處設定開關bBtn,假設所有的屬性均已運動完畢true11 var bBtn = true;12 for(var sAttr in oTarget){13 // 擷取當前值,此處相容透明度的變化14 if(sAttr === ‘opacity‘) {15 var iCur = parseFloat(getStyle(obj, sAttr) * 100);16 } else {17 var iCur = parseInt(getStyle(obj, sAttr));18 }19 // 計算速度,此處可判定方向,如向左或向右,先透明後出現或先出現後透明等20 var iSpeed = (oTarget[sAttr] - iCur) / ratio;21 iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);22 23 // 計算下一次的值24 var iNext = iCur + iSpeed;25 26 // 賦值給對應樣式27 if(sAttr ===‘opacity‘) {28 obj.style.opacity = iNext / 100;29 obj.style.filter = ‘alpha(opacity=‘ + iNext +‘)‘;30 } else {31 obj.style[sAttr] = iNext + ‘px‘;32 }33 34 // 清除定時器,當前的位置和終點值是否相等,相等則說明結束35 if(iNext !== oTarget[sAttr]) {36 bBtn = false;37 }38 }39 // 如果bBtn的值為true,則說明所有的屬性均已運動完畢,回呼函數fn()40 if(bBtn) {41 clearInterval(obj.iTimer);42 if(fn){43 fn();44 }45 }46 }, 50);47 }
以上封裝函數也可以用於單個屬性,多樣式運動,比如:
bufferMove(obj,{"left":200,"width":400,"opacity":80},fn,8);
就這樣。
JS運動緩衝的封裝函數