JavaScript中的勻速運動和變速(緩沖)運動詳細(xì)介紹
更新時間：2012年11月11日 19:44:45 作者：
一個div的運動其實就是它與瀏覽器邊框的距離在變動。如果他變化的速率一定，那就是勻速運動；如果變化的速率不一定，那么就是變速運動
一個div的運動其實就是它與瀏覽器邊框的距離在變動。如果他變化的速率一定，那就是勻速運動；如果變化的速率不一定，那么就是變速運動。當(dāng)，變化率與聚離瀏覽器邊框的距離成比例的話，那么就可以說是div在做緩沖運動。
其實，很簡單，就是用一個定時器（timer），每隔一段時間來改變div聚瀏覽器邊框的距離。
比如勻速運動：
進(jìn)入定時器：（每隔30ms做）
if(是否到達(dá)終點)
{ 停止定時器}
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);
};
這樣，一個運動框架就寫好了！原理很簡單，不過還有待完善。慢慢來吧！
其實，很簡單，就是用一個定時器（timer），每隔一段時間來改變div聚瀏覽器邊框的距離。
比如勻速運動：
進(jìn)入定時器：（每隔30ms做）
if(是否到達(dá)終點)
{ 停止定時器}
else do{ 改變距離}
改變距離的方法決定是勻速還是變速（緩沖）運動。
勻速的比如：
復(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);
};
緩沖運動:
復(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);
};
這樣，一個運動框架就寫好了！原理很簡單，不過還有待完善。慢慢來吧！
相關(guān)文章
HTML5就提出了web?Worker標(biāo)準(zhǔn),表示JavaScript允許有多個線程,但是子線程完全受主線程的控制,并且子線程不能操作DOM,只有主線程可以操作DOM2025-03-03
深入理解JavaScript中的語法和代碼結(jié)構(gòu)
這篇文章主要介紹了JavaScript中的語法和代碼結(jié)構(gòu)，對JS初學(xué)者而言，這些基礎(chǔ)一定要看一下2021-05-05
這篇文章主要介紹了js類式繼承的具體實現(xiàn)方法，有需要的朋友可以參考一下2013-12-12
javascript學(xué)習(xí)筆記(七) js函數(shù)介紹
javascript學(xué)習(xí)筆記之js函數(shù)介紹，需要的朋友可以參考下2012-06-06
假如您需要運行代碼多次，且每次使用不同的值，那么循環(huán)（loop）相當(dāng)方便使用。本篇文章通過幾個實例來帶你掌握循環(huán)的用法2021-11-11
這篇文章主要介紹了JavaScript面對國際化編程時的一些建議,包括時區(qū)與語言編碼等一些值得注意的問題,需要的朋友可以參考下2015-06-06
javascript定義變量時加var與不加var的區(qū)別
這篇文章主要介紹了javascript 變量中 var 與不加var的區(qū)別,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了詳解JavaScript的while循環(huán)的使用,是JS入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了JS獲取各種寬度、高度的簡單介紹的相關(guān)資料,需要的朋友可以參考下2014-12-12
本文主要是給大家簡單介紹了Array的相關(guān)基礎(chǔ)知識，到這里也算是能對Array有更全面的理解了，希望大家能夠喜歡，后續(xù)我們將繼續(xù)介紹關(guān)于array的內(nèi)容。2021-11-11