js指定步長(zhǎng)實(shí)現(xiàn)單方向勻速運(yùn)動(dòng)

更新時(shí)間：2017年07月17日 16:31:08 作者：diasa

這篇文章主要為大家詳細(xì)介紹了js指定步長(zhǎng)實(shí)現(xiàn)單方向勻速運(yùn)動(dòng)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js實(shí)現(xiàn)單方向勻速運(yùn)動(dòng)的具體代碼，供大家參考，具體內(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)

    //問(wèn)題:當(dāng)總距離/我們?cè)O(shè)定的步長(zhǎng) = 不是一個(gè)整數(shù)。少走一步還差點(diǎn)距離到目標(biāo)位置，多走一步會(huì)超出目標(biāo)的位置
    //解決:在進(jìn)行邊界判斷的時(shí)候加上步長(zhǎng)來(lái)進(jìn)行處理

  </script>
</body>
</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

詳解JavaScript中的坐標(biāo)和距離
在前端開(kāi)發(fā)中總會(huì)遇到各種各樣需要使用或計(jì)算坐標(biāo)和距離的情況，于是便有了整理記錄的想法，即加深了印象，又方便隨時(shí)查閱。
2019-05-05
JS實(shí)現(xiàn)的base64加密解密完整實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)的base64加密解密,以完整實(shí)例形式分析了JavaScript基于base64編碼實(shí)現(xiàn)加密與解密的具體步驟與相關(guān)技巧,并附帶了相關(guān)的加密解密在線(xiàn)工具地址供大家參考,需要的朋友可以參考下
2016-04-04
Html中JS腳本執(zhí)行順序簡(jiǎn)單舉例說(shuō)明
寫(xiě)在最前面的最先執(zhí)行，Body的onload事件要在頁(yè)面加載完后才執(zhí)行。
2010-06-06
IE中JS跳轉(zhuǎn)丟失referrer問(wèn)題的2個(gè)解決方法
這篇文章主要介紹了IE中JS跳轉(zhuǎn)丟失referrer問(wèn)題的2個(gè)解決方法,算是IE的一個(gè)BUG吧,本文提供了2個(gè)方法解決這個(gè)問(wèn)題,需要的朋友可以參考下
2014-07-07
webpack-merge的使用教程
這篇文章主要介紹了webpack-merge的使用,webpack-merge 工具提供了各種 merge(合并) 高級(jí)功能，本文給大家詳細(xì)講解，需要的朋友可以參考下
2023-02-02
javascript實(shí)現(xiàn)控制div顏色
本文給大家分享的是使用javascript實(shí)現(xiàn)控制DIV背景色的代碼，非常的簡(jiǎn)單實(shí)用，有需要的小伙伴可以參考下。
2015-07-07
JS/HTML5游戲常用算法之碰撞檢測(cè) 地圖格子算法實(shí)例詳解
這篇文章主要介紹了JS/HTML5游戲常用算法之碰撞檢測(cè) 地圖格子算法,結(jié)合實(shí)例形式詳細(xì)分析了javascript碰撞檢測(cè)算法的相關(guān)原理、實(shí)現(xiàn)技巧與操作注意事項(xiàng),需要的朋友可以參考下
2018-12-12
js中獲取jsp表單中radio類(lèi)型的值簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇js中獲取jsp表單中radio類(lèi)型的值簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-08-08
JS運(yùn)動(dòng)基礎(chǔ)框架實(shí)例分析
這篇文章主要介紹了JS運(yùn)動(dòng)基礎(chǔ)框架,實(shí)例分析了javascript定時(shí)器及div樣式的使用技巧,需要的朋友可以參考下
2015-03-03
JS實(shí)現(xiàn)網(wǎng)頁(yè)每隔3秒彈出一次對(duì)話(huà)框的方法
這篇文章主要介紹了JS實(shí)現(xiàn)網(wǎng)頁(yè)每隔3秒彈出一次對(duì)話(huà)框的方法,涉及JavaScript結(jié)合時(shí)間函數(shù)遞歸調(diào)用的相關(guān)技巧,非常簡(jiǎn)單,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-11-11