快捷導(dǎo)航

利用JS定時(shí)器實(shí)現(xiàn)元素移動(dòng)

更新時(shí)間：2021年05月18日 10:50:12 作者：客官不愛(ài)喝酒

這篇文章主要為大家詳細(xì)介紹了利用JS定時(shí)器實(shí)現(xiàn)元素移動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

利用JS定時(shí)器做一個(gè)元素做一個(gè)有移動(dòng)效果的方法，實(shí)現(xiàn)思路：首先聲明一個(gè)變量存放元素距離左側(cè)的邊距，然后我們?cè)诼暶饕粋€(gè)變量存放每次元素需要移動(dòng)的距離，然后再給這個(gè)方法一個(gè)完成時(shí)間就可以了。需要注意的是獲取到的值如果不是數(shù)值型的數(shù)據(jù)需要裝換，否則不能進(jìn)行判斷。再判斷一下該元素移動(dòng)到某個(gè)位置之后，步長(zhǎng)給它一個(gè)負(fù)值，該元素就會(huì)往回跑了。

大家還可以想一想元素移動(dòng)到左右側(cè)的時(shí)候如何實(shí)現(xiàn)轉(zhuǎn)身效果。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   *{margin: 0;padding: 0;}
   body{position: relative;}
   #box{
    width: 120px;height: 120px;background: green;
    position: absolute;top: 100px;
    /* 此處可以引入一個(gè)背景圖作為移動(dòng)的目標(biāo), */
    /* background: url(img/paobu_huaban.png) 0 0/100% 100%; */
   }
  </style>
 </head>
 <body>
  <button type="button" id="Button">點(diǎn)我移動(dòng)</button>
  <div id="box" style="left: 0px;"></div>
  
  <script type="text/javascript">
   var Button = document.getElementById("Button");
   var box = document.getElementById("box");
   // 每次移動(dòng)多少像素，step表示步長(zhǎng)
   var step = 5;
   Button.onclick = function(){
    
    var timer = setInterval(function(){
     
     //獲取box的left值,轉(zhuǎn)成整數(shù)，一定要轉(zhuǎn)化為數(shù)值行在做運(yùn)算，
     // parseInt表示將獲取到的字符串轉(zhuǎn)化為字符型
     var o_left = parseInt(box.style.left);
     //想要元素走的更快可以改變加大每次移動(dòng)的距離或者是減少完成時(shí)間也可以     
    //但是減少完成時(shí)間這樣的效果要好一點(diǎn)
     var n_left = o_left+step; //每次向右移動(dòng)10px
     box.style.left = n_left+"px";
     if ( n_left>500) { //如果移動(dòng)的距離大于400px就往回跑
      step = -5;
     }else if(n_left==0){
      step = 5;
     }; 
    },100);
   };
   
  </script>
 </body>
</html>

運(yùn)行結(jié)果如下：