開始

點擊第一個按鈕移動到400px

點擊第二個按鈕移動到800px

點擊第一個按鈕移動到400px
這里需要用到定時器
需要注意的是：
1.元素移動div盒子要脫離文檔流，即（position：absolute）
2.通過element.style.left不能獲取元素的left，只能設置，要用offsetLeft()來獲取
3.最好不用var timeid = setInterval(fn,time)的方式，因為這樣每點擊一次按鈕就會定義一個新的timeid，你會發現移動的盒子逐漸加快速度。好的方式是把timeid變成element的屬性，即element.timeid
4.通過判斷（目標位置-當前位置）的絕對值和step的絕對值的大小來決定盒子是否直接到達目標值。

my$("bt1").onclick = function(){animation(my$("dv"),400);}my$("bt2").onclick = function(){animation(my$("dv"),800);}function animation(element,target){console.log(element.offsetLeft)clearInterval(element.timeid)element.timeid = setInterval(function(){var current = element.offsetLeft;var step = 8;step= current<target?step:-step;current+=step;if(Math.abs(target-current)>Math.abs(step)){element.style.left = current +"px";}else{clearInterval(element.timeid)element.style.left = target+"px";}}, 50);}

總結

以上是生活随笔為你收集整理的移动div盒子 原生js的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。