首頁 > web前端 > js教程 > JavaScript中的勻速運動與變速(緩衝)運動詳細介紹_基礎知識

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

WBOY
發布: 2016-05-16 17:48:30
原創
1408 人瀏覽過

一個div的運動其實就是它與瀏覽器邊框的距離在變動。如果他變化的速率一定,那就是等速運動;如果變化的速率不一定,那麼就是變速運動。當,變化率與聚離瀏覽器邊框的距離成比例的話,那麼就可以說是div在做緩衝運動。
其實,很簡單,就是用計時器(timer),每隔一段時間來改變div聚瀏覽器邊框的距離。

如勻速運動:

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

改變距離的方法決定是勻速還是變速(緩衝)運動。

勻速的例如:

複製程式碼


程式碼>
var timer=null;
function startMove()
{

var oDiv=document.getElementById('div1');
clearInterval(timer); 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');
var oDiv=document.getElementById('div1'); var oDiv=document.getElementById('div1'); 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 ); }; 這樣,一個運動框架就寫好了!原理很簡單,不過還有待完善。慢慢來吧!
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板