JavaScript中的勻速運動和變速(緩沖)運動詳細介紹_基礎知識

比如勻速運動：

進入定時器：（每隔30ms做）
if(是否到達終點)
{ 停止定時器}
else do{ 改變距離}

改變距離的方法決定是勻速還是變速（緩沖）運動。

勻速的比如：
代碼如下:
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);
};

緩沖運動:
代碼如下:

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);
};

這樣，一個運動框架就寫好了！原理很簡單，不過還有待完善。慢慢來吧！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com