javascript勻速運動實現(xiàn)方法分析
更新時間：2016年01月08日 11:39:25 作者：lostyu
這篇文章主要介紹了javascript勻速運動實現(xiàn)方法,結合實例形式分析了JavaScript勻速運動的具體實現(xiàn)步驟與相關注意事項,需要的朋友可以參考下
本文實例講述了javascript勻速運動實現(xiàn)方法。分享給大家供大家參考，具體如下：
勻速運動步驟：
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運動效果相關內(nèi)容可查看本站專題：《JavaScript運動效果與技巧匯總》
希望本文所述對大家JavaScript程序設計有所幫助。
相關文章
JavaScript設計模式---單例模式詳解【四種基本形式】
這篇文章主要介紹了JavaScript設計模式---單例模式,結合實例形式詳細分析了JavaScript設模式中單例模式的四種基本形式定義與使用方法,需要的朋友可以參考下2020-05-05
JS實現(xiàn)表格數(shù)據(jù)各種搜索功能的方法
這篇文章主要介紹了JS實現(xiàn)表格數(shù)據(jù)各種搜索功能的方法,可實現(xiàn)忽略大小寫,模糊搜索,多關鍵搜索等功能,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
基于javascript實現(xiàn)tab選項卡切換特效調(diào)試筆記
這篇文章主要介紹了基于javascript實現(xiàn)tab選項卡切換特效調(diào)試筆記，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-03-03
數(shù)據(jù)包圍著我們。雖然搜索引擎和其他應用都對基于文本方式表示的數(shù)據(jù)偏愛有加，但人們發(fā)現(xiàn)可視化是更容易理解的一種方式。今年初，SitePoint 發(fā)表了 Aurelio 的文章《 Chart.js簡介》。在深入研究 Chart.js 的功能后，本文將會講解這篇簡介的一些重點。2015-10-10
這篇文章主要介紹了js循環(huán)li添加點擊事件 （閉包的應用）的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-12-12
微信小程序學習總結（一）項目創(chuàng)建與目錄結構分析
這篇文章主要介紹了微信小程序學習總結（一）項目創(chuàng)建與目錄結構,總結分析了微信小程序項目創(chuàng)建、配置方法以及目錄結構、文件功能,需要的朋友可以參考下2020-06-06
這篇文章主要介紹了微信小程序下拉框功能的實例代碼,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-11-11
閉包和垃圾回收機制常常作為前端學習開發(fā)中的難點,也經(jīng)常在面試中遇到這樣的問題,這篇文章主要介紹了JavaScript垃圾回收與閉包的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2025-04-04
uniapp實現(xiàn)滾動觸底加載項目實戰(zhàn)
這篇文章主要為大家介紹了uniapp實現(xiàn)滾動觸底加載項目實戰(zhàn)方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-09-09
這篇文章主要介紹了淺談Javascript如何實現(xiàn)勻速運動的方法及相關代碼,需要的朋友可以參考下2014-12-12