javascript勻速運(yùn)動(dòng)實(shí)現(xiàn)方法分析

更新時(shí)間：2016年01月08日 11:39:25 作者：lostyu

這篇文章主要介紹了javascript勻速運(yùn)動(dòng)實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了JavaScript勻速運(yùn)動(dòng)的具體實(shí)現(xiàn)步驟與相關(guān)注意事項(xiàng),需要的朋友可以參考下

本文實(shí)例講述了javascript勻速運(yùn)動(dòng)實(shí)現(xiàn)方法。分享給大家供大家參考，具體如下：

勻速運(yùn)動(dòng)步驟：

1. 清除定時(shí)器
2. 開啟定時(shí)器
3. 運(yùn)動(dòng)是否完成：a、運(yùn)動(dòng)完成，清除定時(shí)器；b、運(yùn)動(dòng)未完成繼續(xù)

勻速運(yùn)動(dòng)停止條件：距離足夠近 Math.abs(當(dāng)然距離-目標(biāo)距離) < 最小運(yùn)動(dòng)距離

運(yùn)行效果截圖如下：

div的勻速運(yùn)動(dòng)（簡(jiǎn)單運(yùn)動(dòng)）示例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript勻速運(yùn)動(dòng)</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">移動(dòng)</button>
<div id="div1"></div>
<span></span>
</body>
</html>

更多關(guān)于JavaScript運(yùn)動(dòng)效果相關(guān)內(nèi)容可查看本站專題：《JavaScript運(yùn)動(dòng)效果與技巧匯總》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

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