快捷導(dǎo)航

JavaScript中的勻速運(yùn)動(dòng)和變速(緩沖)運(yùn)動(dòng)詳細(xì)介紹

更新時(shí)間：2012年11月11日 19:44:45 作者：

一個(gè)div的運(yùn)動(dòng)其實(shí)就是它與瀏覽器邊框的距離在變動(dòng)。如果他變化的速率一定，那就是勻速運(yùn)動(dòng)；如果變化的速率不一定，那么就是變速運(yùn)動(dòng)

一個(gè)div的運(yùn)動(dòng)其實(shí)就是它與瀏覽器邊框的距離在變動(dòng)。如果他變化的速率一定，那就是勻速運(yùn)動(dòng)；如果變化的速率不一定，那么就是變速運(yùn)動(dòng)。當(dāng)，變化率與聚離瀏覽器邊框的距離成比例的話，那么就可以說(shuō)是div在做緩沖運(yùn)動(dòng)。
其實(shí)，很簡(jiǎn)單，就是用一個(gè)定時(shí)器（timer），每隔一段時(shí)間來(lái)改變div聚瀏覽器邊框的距離。

比如勻速運(yùn)動(dòng)：

進(jìn)入定時(shí)器：（每隔30ms做）
if(是否到達(dá)終點(diǎn))
{ 停止定時(shí)器}
else do{ 改變距離}

改變距離的方法決定是勻速還是變速（緩沖）運(yùn)動(dòng)。

勻速的比如：

復(fù)制代碼代碼如下:

 
var timer=null; 
function startMove() 
{ 

var oDiv=document.getElementById('div1'); 
clearInterval(timer); 
timer=setInterval(function () { 
var iSpeed=1; 

if(oDiv.offsetLeft>=300) 
{ 
clearInterval(timer); 
} 
else 
{ 
oDiv.style.left=oDiv.offsetLeft+iSpeed+'px'; 
} 
},30); 
}; 

緩沖運(yùn)動(dòng):

復(fù)制代碼代碼如下:

 

var timer=null; 
function startMove() 
{ 
var iTarget=300; 

var oDiv=document.getElementById('div1'); 

clearInterval(timer); 
timer=setInterval(function () { 
var iSpeed=(iTarget-oDiv.offsetLeft)/8; 

iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); 

iSpeed=Math.ceil(iSpeed); 
if(oDiv.offsetLeft==iTarget) 
{ 
clearInterval(timer); 
} 
else 
{ 
oDiv.style.left=oDiv.offsetLeft+iSpeed+'px'; 
} 
document.title=oDiv.style.left+' '+iSpeed; 
},30); 
}; 