思路：將某元素移動到指定位置======需傳入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>