JS實(shí)現(xiàn)勻速運(yùn)動(dòng)的代碼實(shí)例
效果:

思路:
利用setInerval()計(jì)時(shí)器,進(jìn)行運(yùn)動(dòng)。然后關(guān)鍵的一點(diǎn)是在最后停止的時(shí)候給它一個(gè)填充縫隙的判斷。
代碼:
<head runat="server">
<title></title>
<style type="text/css">
#div1
{
width: 100px;
height: 100px;
background: #0000FF;
position: absolute;
left: 800px;
top: 100px;
}
#div200
{
width: 1px;
height: 400px;
background: #FF0000;
position: absolute;
left: 200px;
}
#div500
{
width: 1px;
height: 400px;
background: #FF0000;
position: absolute;
left: 500px;
}
</style>
<script type="text/javascript">
function move(end) {
var oDiv = document.getElementById('div1');
var timer = null;
timer = setInterval(function () {
var speed = (end - oDiv.offsetLeft) / 5; //根據(jù)終點(diǎn)和offsetLeft取出運(yùn)動(dòng)的速度
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //進(jìn)位取整,小數(shù)位變?yōu)檎唬?BR> // if (oDiv.offsetLeft <= end) {
// clearInterval(timer);
// }
// else {
// oDiv.style.left = oDiv.offsetLeft + speed + 'px';
// }
if (Math.abs(end - oDiv.offsetLeft) <= speed) { //由于在停止的時(shí)候最后會(huì)出現(xiàn)小的縫隙,或者說(shuō)沒(méi)有完全的到達(dá)指定地點(diǎn),所以要小于它的速度
clearInterval(timer); //當(dāng)距離小于速度時(shí),讓計(jì)時(shí)器停止
oDiv.style.left = end + 'px'; //在停止后填充縫隙。
}
else {
oDiv.style.left = oDiv.offsetLeft + speed + 'px'; //移動(dòng)DIV
}
}, 30)
}
</script>
</head>
<body>
<input type="button" id="btn1" value="到500的位置" onclick="move(500);" />
<input type="button" id="btn2" value="到200的位置" onclick="move(200);" />
<div id="div1">
</div>
<div id="div200">200
</div>
<div id="div500">500
</div>
</body>
- js指定步長(zhǎng)實(shí)現(xiàn)單方向勻速運(yùn)動(dòng)
- 原生javascript實(shí)現(xiàn)勻速運(yùn)動(dòng)動(dòng)畫效果
- javascript勻速運(yùn)動(dòng)實(shí)現(xiàn)方法分析
- 淺談Javascript中勻速運(yùn)動(dòng)的停止條件
- 淺談Javascript如何實(shí)現(xiàn)勻速運(yùn)動(dòng)
- JS勻速運(yùn)動(dòng)演示示例代碼
- JavaScript中的勻速運(yùn)動(dòng)和變速(緩沖)運(yùn)動(dòng)詳細(xì)介紹
- 原生JS實(shí)現(xiàn)各種運(yùn)動(dòng)之勻速運(yùn)動(dòng)
相關(guān)文章
javascript實(shí)現(xiàn)劃詞標(biāo)記+劃詞搜索功能
javascript實(shí)現(xiàn)劃詞標(biāo)記+劃詞搜索功能...2007-03-03當(dāng)達(dá)到輸入長(zhǎng)度時(shí)表單自動(dòng)切換焦點(diǎn)
給每個(gè)字段限制輸入長(zhǎng)度,當(dāng)達(dá)到輸入長(zhǎng)度時(shí)自動(dòng)切換焦點(diǎn),以增強(qiáng)表單的易用性,需要的朋友可以參考下2014-04-04javascript數(shù)組中的map方法和filter方法
這篇文章主要介紹了javascript數(shù)組中的map方法和filter方法,文章內(nèi)容介紹詳細(xì),具有一定的參考價(jià)值,需要的小伙伴可以參考一下,希望對(duì)你的學(xué)習(xí)有所幫助2022-03-03js函數(shù)setTimeout延遲執(zhí)行的簡(jiǎn)單介紹
設(shè)置指定的JS函數(shù)在指定的時(shí)間后執(zhí)行,可以利用setTimeout()函數(shù)。2013-07-07JavaScript聲明函數(shù)的5種方法小結(jié)
本文主要介紹了JavaScript聲明函數(shù)的5種方法小結(jié),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02Echarts餅圖樣式之添加內(nèi)圈陰影達(dá)到立體效果
餅圖主要是通過(guò)扇形的弧度表現(xiàn)不同類目的數(shù)據(jù)在總和中的占比,它的數(shù)據(jù)格式比柱狀圖更簡(jiǎn)單,這篇文章主要給大家介紹了關(guān)于Echarts餅圖樣式之添加內(nèi)圈陰影達(dá)到立體效果的相關(guān)資料,文中還介紹了echarts餅圖外部陰影設(shè)置的方法,需要的朋友可以參考下2024-02-02three.js利用射線Raycaster進(jìn)行碰撞檢測(cè)
這篇文章主要為大家詳細(xì)介紹了three.js利用射線Raycaster進(jìn)行碰撞檢測(cè),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-03-03JavaScript中使用typeof運(yùn)算符需要注意的幾個(gè)坑
這篇文章主要介紹了JavaScript中使用typeof運(yùn)算符需要注意的幾個(gè)坑,本文總結(jié)了4個(gè)使用typeof運(yùn)算符要注意的問(wèn)題,需要的朋友可以參考下2014-11-11