js指定步長實現(xiàn)單方向勻速運動
更新時間：2017年07月17日 16:31:08 作者：diasa
這篇文章主要為大家詳細介紹了js指定步長實現(xiàn)單方向勻速運動，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)單方向勻速運動的具體代碼，供大家參考，具體內(nèi)容如下
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='box'></div>
<script>
var oBox = document.getElementById("box");
var maxLeft = utils.win('clientWidth')-oBox.offsetWidth;
var step = 5;
var timer = window.setInterval(function(){
var curLeft = utils.css(oBox,"left");
if(curLeft+step >= maxLeft){//邊界判斷
utils.css(oBox,"left",maxLeft);
window.clearInterval(timer);
return;
}
curLeft+=step;
utils.css(oBox,"left",curLeft);
},10)
//問題:當總距離/我們設定的步長 = 不是一個整數(shù)。少走一步還差點距離到目標位置，多走一步會超出目標的位置
//解決:在進行邊界判斷的時候加上步長來進行處理
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
在前端開發(fā)中總會遇到各種各樣需要使用或計算坐標和距離的情況，于是便有了整理記錄的想法，即加深了印象，又方便隨時查閱。2019-05-05
這篇文章主要介紹了JS實現(xiàn)的base64加密解密,以完整實例形式分析了JavaScript基于base64編碼實現(xiàn)加密與解密的具體步驟與相關(guān)技巧,并附帶了相關(guān)的加密解密在線工具地址供大家參考,需要的朋友可以參考下2016-04-04
寫在最前面的最先執(zhí)行，Body的onload事件要在頁面加載完后才執(zhí)行。2010-06-06
IE中JS跳轉(zhuǎn)丟失referrer問題的2個解決方法
這篇文章主要介紹了IE中JS跳轉(zhuǎn)丟失referrer問題的2個解決方法,算是IE的一個BUG吧,本文提供了2個方法解決這個問題,需要的朋友可以參考下2014-07-07
這篇文章主要介紹了webpack-merge的使用,webpack-merge 工具提供了各種 merge(合并) 高級功能，本文給大家詳細講解，需要的朋友可以參考下2023-02-02
本文給大家分享的是使用javascript實現(xiàn)控制DIV背景色的代碼，非常的簡單實用，有需要的小伙伴可以參考下。2015-07-07
JS/HTML5游戲常用算法之碰撞檢測 地圖格子算法實例詳解
這篇文章主要介紹了JS/HTML5游戲常用算法之碰撞檢測 地圖格子算法,結(jié)合實例形式詳細分析了javascript碰撞檢測算法的相關(guān)原理、實現(xiàn)技巧與操作注意事項,需要的朋友可以參考下2018-12-12
下面小編就為大家?guī)硪黄猨s中獲取jsp表單中radio類型的值簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
這篇文章主要介紹了JS運動基礎框架,實例分析了javascript定時器及div樣式的使用技巧,需要的朋友可以參考下2015-03-03
JS實現(xiàn)網(wǎng)頁每隔3秒彈出一次對話框的方法
這篇文章主要介紹了JS實現(xiàn)網(wǎng)頁每隔3秒彈出一次對話框的方法,涉及JavaScript結(jié)合時間函數(shù)遞歸調(diào)用的相關(guān)技巧,非常簡單,具有一定參考借鑒價值,需要的朋友可以參考下2015-11-11