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