本文實(shí)例講述了JavaScript緩沖運(yùn)動(dòng)實(shí)現(xiàn)方法。分享給大家供大家參考，具體如下：
實(shí)現(xiàn)原理：(目標(biāo)距離-當(dāng)前距離) / 基數(shù) = 速度(運(yùn)動(dòng)距離越大速度越小，運(yùn)動(dòng)距離和速度成反比)
復(fù)制代碼代碼如下:
(500 - oDiv.offsetLeft) / 7 = iSpeed;
需要注意：當(dāng)計(jì)算出來(lái)的速度有小數(shù)時(shí)需要取整；
復(fù)制代碼代碼如下:
(500 - oDiv.offsetLeft) / 7 = iSpeed; iSpeed = iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
例子1：滑塊緩沖運(yùn)動(dòng)
<!doctype html><html><head><meta charset="utf-8"><title>緩沖運(yùn)動(dòng)</title><style>#div1{ width:100px; height:100px; background:red; position:absolute; top:50px; left:0;}span{ width:1px; height:300px; background:black; position:absolute; left:300px; top:0; display:block;}</style><script>window.onload = function(){ var oBtn = document.getElementById('btn1'); var oDiv = document.getElementById('div1'); oBtn.onclick = function() { startMove(oDiv, 300); };};var timer = null;function startMove(obj, iTarget){ clearInterval(timer); timer = setInterval(function(){ var iSpeed = (iTarget - obj.offsetLeft)/8; iSpeed = iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); if(iTarget==obj.offsetLeft){ clearInterval(timer); }else{ obj.style.left = obj.offsetLeft + iSpeed + 'px'; } }, 30);}</script></head><body><input id="btn1" type="button" value="移動(dòng)" /><div id="div1"></div><span></span></body></html> 例子2：側(cè)邊欄滑動(dòng)
<!doctype html><html><head><meta charset="utf-8"><title>側(cè)邊欄滑動(dòng)</title><style>#div1{ width:100px; height:100px; background:red; position:absolute; right:0; top:0;}</style><script>window.onload = window.onscroll = function(){ var oDiv = document.getElementById('div1'); var iScrollTop = document.documentElement.scrollTop || document.body.scrollTop; var clientHeight = document.documentElement.clientHeight; var iH = (clientHeight - oDiv.offsetHeight)/2 + iScrollTop; //oDiv.style.top = iH + 'px'; startMove(oDiv, parseInt(iH));};var timer = null;function startMove(obj, iTarget){ clearInterval(timer); timer = setInterval(function(){ var iSpeed = (iTarget - obj.offsetTop) / 8; iSpeed = iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); if(obj.offsetTop == iTarget){ clearInterval(timer); }else{ obj.style.top = obj.offsetTop + iSpeed + 'px'; } }, 30);}</script></head><body style="height:2000px;"><div id="div1"></div></body></html> 更多關(guān)于JavaScript運(yùn)動(dòng)效果相關(guān)內(nèi)容可查看本站專題：《JavaScript運(yùn)動(dòng)效果與技巧匯總》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
