這篇文章給大家介紹使用JavaScript怎么實(shí)現(xiàn)一個(gè)運(yùn)動(dòng)緩沖效果，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、成都小程序開發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了順平免費(fèi)建站歡迎大家使用！

具體如下：

/*
  物體多屬性同時(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怎么實(shí)現(xiàn)一個(gè)運(yùn)動(dòng)緩沖效果就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。