JavaScript

利用JS定时器实现元素移动

佚名客官不爱喝酒2021-05-18JavaScript2308

这篇文章主要为大家详细介绍了利用JS定时器实现元素移动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

利用JS定时器做一个元素做一个有移动效果的方法，实现思路：首先声明一个变量存放元素距离左侧的边距，然后我们在声明一个变量存放每次元素需要移动的距离，然后再给这个方法一个完成时间就可以了。需要注意的是获取到的值如果不是数值型的数据需要装换，否则不能进行判断。再判断一下该元素移动到某个位置之后，步长给它一个负值，该元素就会往回跑了。

大家还可以想一想元素移动到左右侧的时候如何实现转身效果。

<!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;
    /* 此处可以引入一个背景图作为移动的目标, */
    /* background: url(img/paobu_huaban.png) 0 0/100% 100%; */
   }
  </style>
 </head>
 <body>
  <button type="button" id="Button">点我移动</button>
  <div id="box" style="left: 0px;"></div>
  
  <script type="text/javascript">
   var Button = document.getElementById("Button");
   var box = document.getElementById("box");
   // 每次移动多少像素，step表示步长
   var step = 5;
   Button.onclick = function(){
    
    var timer = setInterval(function(){
     
     //获取box的left值,转成整数，一定要转化为数值行在做运算，
     // parseInt表示将获取到的字符串转化为字符型
     var o_left = parseInt(box.style.left);
     //想要元素走的更快可以改变加大每次移动的距离或者是减少完成时间也可以     
    //但是减少完成时间这样的效果要好一点
     var n_left = o_left+step; //每次向右移动10px
     box.style.left = n_left+"px";
     if ( n_left>500) { //如果移动的距离大于400px就往回跑
      step = -5;
     }else if(n_left==0){
      step = 5;
     }; 
    },100);
   };
   
  </script>
 </body>
</html>

运行结果如下：