本文實例講述了JS實現運動緩沖效果的封裝函數。分享給大家供大家參考，具體如下：
之前經常寫運動函數，要寫好多好多，后來想辦法封裝起來。（運動緩沖）。
/* 物體多屬性同時運動的函數 obj：運動的物體 oTarget：對象，屬性名為運動的樣式名，屬性值為樣式運動的終點值 ratio：速度的系數*/function bufferMove(obj, oTarget, fn,ratio = 8) { clearInterval(obj.iTimer); obj.iTimer = setInterval(function () { // 此處設定開關bBtn，假設所有的屬性均已運動完畢true var bBtn = true; for(var sAttr in oTarget){ // 獲取當前值，此處兼容透明度的變化 if(sAttr === 'opacity') { var iCur = parseFloat(getStyle(obj, sAttr) * 100); } else { var iCur = parseInt(getStyle(obj, sAttr)); } // 計算速度，此處可判定方向，如向左或向右，先透明后出現或先出現后透明等 var iSpeed = (oTarget[sAttr] - iCur) / ratio; iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); // 計算下一次的值 var iNext = iCur + iSpeed; // 賦值給對應樣式 if(sAttr ==='opacity') { obj.style.opacity = iNext / 100; obj.style.filter = 'alpha(opacity=' + iNext +')'; } else { obj.style[sAttr] = iNext + 'px'; } // 清除定時器，當前的位置和終點值是否相等，相等則說明結束 if(iNext !== oTarget[sAttr]) { bBtn = false; } } // 如果bBtn的值為true，則說明所有的屬性均已運動完畢，回調函數fn() if(bBtn) { clearInterval(obj.iTimer); if(fn){ fn(); } } }, 50);}以上封裝函數也可以用于單個屬性，多樣式運動，比如：
bufferMove(obj,{"left":200,"width":400,"opacity":80},fn,8);就這樣。
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript運動效果與技巧匯總》、《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
