JS實現(xiàn)勻速運動的代碼實例
更新時間:2013年11月29日 16:45:42 作者:
這篇文章主要介紹了JS實現(xiàn)勻速運動的代碼實例,有需要的朋友可以參考一下
效果:

思路:
利用setInerval()計時器,進行運動。然后關(guān)鍵的一點是在最后停止的時候給它一個填充縫隙的判斷。
代碼:
復(fù)制代碼 代碼如下:
<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ù)終點和offsetLeft取出運動的速度
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //進位取整,小數(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) { //由于在停止的時候最后會出現(xiàn)小的縫隙,或者說沒有完全的到達指定地點,所以要小于它的速度
clearInterval(timer); //當距離小于速度時,讓計時器停止
oDiv.style.left = end + 'px'; //在停止后填充縫隙。
}
else {
oDiv.style.left = oDiv.offsetLeft + speed + 'px'; //移動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>
相關(guān)文章
javascript數(shù)組中的map方法和filter方法
這篇文章主要介紹了javascript數(shù)組中的map方法和filter方法,文章內(nèi)容介紹詳細,具有一定的參考價值,需要的小伙伴可以參考一下,希望對你的學(xué)習(xí)有所幫助2022-03-03js函數(shù)setTimeout延遲執(zhí)行的簡單介紹
設(shè)置指定的JS函數(shù)在指定的時間后執(zhí)行,可以利用setTimeout()函數(shù)。2013-07-07JavaScript聲明函數(shù)的5種方法小結(jié)
本文主要介紹了JavaScript聲明函數(shù)的5種方法小結(jié),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02JavaScript中使用typeof運算符需要注意的幾個坑
這篇文章主要介紹了JavaScript中使用typeof運算符需要注意的幾個坑,本文總結(jié)了4個使用typeof運算符要注意的問題,需要的朋友可以參考下2014-11-11