本文實(shí)例講述了JS實(shí)現(xiàn)運(yùn)動(dòng)緩沖效果的封裝函數(shù)。分享給大家供大家參考，具體如下：

之前經(jīng)常寫運(yùn)動(dòng)函數(shù)，要寫好多好多，后來想辦法封裝起來。（運(yùn)動(dòng)緩沖）。

/*  物體多屬性同時(shí)運(yùn)動(dòng)的函數(shù)  obj：運(yùn)動(dòng)的物體  oTarget：對(duì)象，屬性名為運(yùn)動(dòng)的樣式名，屬性值為樣式運(yùn)動(dòng)的終點(diǎn)值  ratio：速度的系數(shù)*/function bufferMove(obj, oTarget, fn,ratio = 8) {  clearInterval(obj.iTimer);  obj.iTimer = setInterval(function () {    // 此處設(shè)定開關(guān)bBtn，假設(shè)所有的屬性均已運(yùn)動(dòng)完畢true    var bBtn = true;    for(var sAttr in oTarget){      // 獲取當(dāng)前值，此處兼容透明度的變化      if(sAttr === 'opacity') {        var iCur = parseFloat(getStyle(obj, sAttr) * 100);      } else {        var iCur = parseInt(getStyle(obj, sAttr));      }      // 計(jì)算速度，此處可判定方向，如向左或向右，先透明后出現(xiàn)或先出現(xiàn)后透明等      var iSpeed = (oTarget[sAttr] - iCur) / ratio;      iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);      // 計(jì)算下一次的值      var iNext = iCur + iSpeed;      // 賦值給對(duì)應(yīng)樣式      if(sAttr ==='opacity') {        obj.style.opacity = iNext / 100;        obj.style.filter = 'alpha(opacity=' + iNext +')';      } else {        obj.style[sAttr] = iNext + 'px';      }      // 清除定時(shí)器，當(dāng)前的位置和終點(diǎn)值是否相等，相等則說明結(jié)束      if(iNext !== oTarget[sAttr]) {        bBtn = false;      }    }    // 如果bBtn的值為true，則說明所有的屬性均已運(yùn)動(dòng)完畢，回調(diào)函數(shù)fn()    if(bBtn) {      clearInterval(obj.iTimer);      if(fn){        fn();      }    }  }, 50);}

以上封裝函數(shù)也可以用于單個(gè)屬性，多樣式運(yùn)動(dòng)，比如：

bufferMove(obj,{"left":200,"width":400,"opacity":80},fn,8);

就這樣。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript運(yùn)動(dòng)效果與技巧匯總》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。