之前經(jīng)常寫運動函數(shù)，要寫好多好多，后來想辦法封裝起來。（運動緩沖）。本文主要和大家介紹了JS實現(xiàn)運動緩沖效果的封裝函數(shù),涉及Javascript時間函數(shù)與數(shù)值運算相關操作技巧,需要的朋友可以參考下，希望能幫助到大家。
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));
}
// 計算速度，此處可判定方向，如向左或向右，先透明后出現(xiàn)或先出現(xiàn)后透明等
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，則說明所有的屬性均已運動完畢，回調函數(shù)fn()
if(bBtn) {
clearInterval(obj.iTimer);
if(fn){
fn();
}
}
}, 50);
}以上封裝函數(shù)也可以用于單個屬性，多樣式運動，比如：
bufferMove(obj,{"left":200,"width":400,"opacity":80},fn,8);就這樣。
相關推薦：
HTML5實現(xiàn)的Loading緩沖效果
javascript 緩沖效果 實現(xiàn)代碼_javascript技巧
JS+CSS實現(xiàn)帶有碰撞緩沖效果的豎向導航條代碼_javascript技巧
以上就是運動緩沖效果的封裝函數(shù)示例代碼的詳細內(nèi)容，更多請關注php中文網(wǎng)其它相關文章！