思路：将某元素移动到指定位置======需传入2个参数。一个是要移动的元素element，另一个是指定的位置target。

获取元素的当前位置current，设置一个每次移动的距离step，设置定时器，通过多次循环移动，到达目标位置。根据当前位置和目标位置的距离判断是否需要执行循环

以本文为例，点击按钮1，div移动到400px的位置，点击按钮2 ，移动到1600px，这里有几个坑：

1、元素要移动，需要脱离文档流，即css样式中需要使用绝对定位

2、每触发一次点击，就产生一个定时器，当不停地点击按钮时，元素移动的速度不断加快

===》解决：只设置一个定时器，且在执行定时器之前先清理一次定时器，防止上次的操作留下影响。

只设置一个定时器可以根据对象的属性，对象点出来的属性有且只有一个。即element.timer1=setInterval();

3、获取元素的当前位置，需要用offsetLeft /  offsetTop / offsetWidth / offsetHeight,得出的结果是number类型，没有px

html以及css样式

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>    
 6         <style>
 7             div{
 8                 width: 200px;
 9                 height: 130px;
10                 background: red; 
11                 position: absolute;
12                 left: 20px;
13                 }
14         </style>
15     </head>
16     
17     <body>
18         <input type="button" value="按钮1" id="btn"/>
19         <input type="button" value="按钮2" id="btn2"/>
20         <div id="dv"> </div>        
21     </body>    
22 </html>

 js代码

 1  <script>
 2              document.getElementById("btn").onclick=function(){
 3                  animate(document.getElementById("dv"),400);
 4                  
 5              };            
 6              document.getElementById("btn2").onclick=function(){
 7                  animate(document.getElementById("dv"),1600);
 8             };
 9              //把任意元素移动到指定的目标位置
10              function animate(element,target){
11                  clearInterval(element.timer1);
12                  element.timer1=setInterval(function(){//element是一个对象，对象点出来的属性有且只有一个，避免多次点击按钮产生多个定时器
13                      var current=element.offsetLeft;    //获取当前位置，数字类型，没有px。
14                      //不可以用element.style.left，因为该写法只能获取到行内样式，不能获取到<style></style>标签内的样式
15                      var step=10;//每次移动的距离
16                      step=current<target?step:-step;//step的正负表示了向左或是向右移动
17                      current+=step;    //计算移动到的位置，数字类型，没有px                
18                      if(Math.abs(target-current)>Math.abs(step)){//当离目标位置的距离大于一步移动的距离
19                          element.style.left=current+"px";//移动
20                     
21                      }else{//当间距小于一步的距离，则清理定时器，把元素直接拿到目标位置
22                          clearInterval(element.timer1);
23                          element.style.left=target+"px";
24                          
25                     }
26                  },20);
27              }
28          </script>

 

版权声明：本文为fyy-new原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/fyy-new/p/9283807.html