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

最新推荐文章于 2023-06-13 17:18:39 发布

野生java研究僧

最新推荐文章于 2023-06-13 17:18:39 发布

阅读量2.2k

点赞数 3

文章标签： javascript html5

本文链接：https://blog.csdn.net/m0_46188681/article/details/105982416

版权

利用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>

运行结果如下：
运行效果图：

野生java研究僧

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
利用JS定时器让元素实现移动

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

扫一扫