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

之前經(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ù)

functionbufferMove(obj,oTarget,fn,ratio=8){

clearInterval(obj.iTimer);

obj.iTimer=setInterval(function(){

//此處設(shè)定開(kāi)關(guān)bBtn，假設(shè)所有的屬性均已運(yùn)動(dòng)完畢true

varbBtn=true;

for(varsAttrinoTarget){

//獲取當(dāng)前值，此處兼容透明度的變化

if(sAttr==='opacity'){

variCur=parseFloat(getStyle(obj,sAttr)*100);

}else{

variCur=parseInt(getStyle(obj,sAttr));

//計(jì)算速度，此處可判定方向，如向左或向右，先透明后出現(xiàn)或先出現(xiàn)后透明等

variSpeed=(oTarget[sAttr]-iCur)/ratio;

iSpeed=iSpeed0Math.ceil(iSpeed):Math.floor(iSpeed);

//計(jì)算下一次的值

variNext=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);

就這樣。

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