開始

點(diǎn)擊第一個(gè)按鈕移動(dòng)到400px

點(diǎn)擊第二個(gè)按鈕移動(dòng)到800px

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

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);}

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。