javascript勻速運動實現方法分析
更新時間：2016年01月08日 11:39:25 作者：lostyu
這篇文章主要介紹了javascript勻速運動實現方法,結合實例形式分析了JavaScript勻速運動的具體實現步驟與相關注意事項,需要的朋友可以參考下
本文實例講述了javascript勻速運動實現方法。分享給大家供大家參考，具體如下：
勻速運動步驟：
1. 清除定時器
2. 開啟定時器
3. 運動是否完成：a、運動完成，清除定時器；b、運動未完成繼續(xù)
勻速運動停止條件：距離足夠近 Math.abs(當然距離-目標距離) < 最小運動距離
運行效果截圖如下：
div的勻速運動（簡單運動）示例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript勻速運動</title>
<style>
#div1{ width:100px; height:100px; background:red; position:absolute; top:50px; left:500px;}
span{ width:1px; height:300px; background:black; position:absolute; left:300px; top:0; display:block;}
</style>
<script>
window.onload = function()
{
var oBtn = document.getElementById('btn1');
var oDiv = document.getElementById('div1');
oBtn.onclick = function()
{
startMove(oDiv, 300);
};
};
var timer = null;
function startMove(obj, iTarget)
{
clearInterval(timer);
timer = setInterval(function(){
var iSpeed = 0;
if(obj.offsetLeft < iTarget)
{
iSpeed = 7;
}
else
{
iSpeed = -7;
}
if( Math.abs( obj.offsetLeft - iTarget ) < 7 )
{
clearInterval(timer);
obj.style.left = iTarget + 'px';
}
else
{
obj.style.left = obj.offsetLeft + iSpeed + 'px';
}
}, 30);
}
</script>
</head>
<body>
<button id="btn1">移動</button>
<div id="div1"></div>
<span></span>
</body>
</html>
更多關于JavaScript運動效果相關內容可查看本站專題：《JavaScript運動效果與技巧匯總》
希望本文所述對大家JavaScript程序設計有所幫助。
相關文章
JavaScript可以說是一個基于對象的編程語言，為什么說是基于對象而不是面向對象，因為JavaScript自身只實現了封裝，而沒有實現繼承和多態(tài)。2009-07-07
這篇文章主要介紹了javascript實現圖片輪換動作方法，文章通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-08-08
遞歸函數是在通過名字調用自身的情況下構成的。下面通過本文給大家分享JavaScript中遞歸實現的方法及其區(qū)別，感興趣的朋友一起看看吧2017-09-09
本篇文章主要介紹了Bootstrap筆記—折疊實例代碼，詳細的介紹了折疊效果實例，包括一組多組等，非常具有實用價值，需要的朋友可以參考下。2017-03-03
算法是計算機算法即計算機能夠執(zhí)行的算法,只有明確了算法后,才能使應用程序實現某些功能,所以通常人們會將算法稱為程序的靈魂,下面這篇文章主要給大家分享介紹了一些超實用的JS常用算法的相關資料,需要的朋友可以參考下2022-10-10
JavaScript繼承基礎講解(原型鏈、借用構造函數、混合模式、原型式繼承、寄生式繼承、寄生組合式繼承)
這篇文章主要介紹了JavaScript繼承基礎講解，原型鏈、借用構造函數、混合模式、原型式繼承、寄生式繼承、寄生組合式繼承,需要的朋友可以參考下2014-08-08
一個多層疊的TAB選項卡，自適應寬度(自行更改nonstop的width測試效果)。2010-01-01
這篇文章主要給大家介紹了關于微信小程序npm引入vant-weapp的踩坑記錄，文中通過示例代碼介紹的非常詳細，對大家學習或者使用微信小程序具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-08-08
這篇文章主要介紹了threejs?模型添加文字的幾種方式,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
在開發(fā)移動應用程序時,我們經常需要處理用戶交互事件,然而,有時候這些事件會冒泡,導致意外的行為和不良用戶體驗,在本文中,我們將探討如何使用UniApp框架來阻止事件冒泡,并提供一些示例代碼來幫助您理解如何實現這一功能,需要的朋友可以參考下2023-11-11