JS運動緩衝的封裝函數

來源:互聯網
上載者:User

標籤: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運動緩衝的封裝函數

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.