您好,登錄后才能下訂單哦!
這篇文章主要介紹了javascript運(yùn)動(dòng)緩沖效果的封裝函數(shù)怎么用,具有一定借鑒價(jià)值,需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
之前經(jīng)常寫(xiě)運(yùn)動(dòng)函數(shù),要寫(xiě)好多好多,后來(lái)想辦法封裝起來(lái)。(運(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è)定開(kāi)關(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)值是否相等,相等則說(shuō)明結(jié)束 if(iNext !== oTarget[sAttr]) { bBtn = false; } } // 如果bBtn的值為true,則說(shuō)明所有的屬性均已運(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);
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享javascript運(yùn)動(dòng)緩沖效果的封裝函數(shù)怎么用內(nèi)容對(duì)大家有幫助,同時(shí)也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,遇到問(wèn)題就找億速云,詳細(xì)的解決方法等著你來(lái)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。