<!DOCTYPE html> <meta charset="utf-8"> <head> <title></title> <style type="text/css"> #div1{width: 100px; height: 100px; background-color: red; position:absolute; left: 900px;top: 50px;} #div2{width: 1px;height: 300px;background-color: black; position: absolute; left: 300px;top: 0px;} #div3{width: 1px;height: 300px;background-color: black; position: absolute; left: 800px;top: 0px;} </style> <script type="text/javascript"> window.onload = function() { var oDiv1 = document.getElementById('div1'); var oBtn1 = document.getElementById('btn1'); var oBtn2 = document.getElementById('btn2'); var timer = null; oBtn1.onclick = function() { startMove(300); } oBtn2.onclick = function() { startMove(800); } function startMove(iTarget) { var oDiv1 = document.getElementById('div1'); clearInterval(timer); timer=setInterval(function(){ var speed = 0; if (oDiv1.offsetLeft<iTarget) { speed = 7; } else { speed = -7; } if(Math.abs(iTarget-oDiv1.offsetLeft<=7)) { clearInterval(timer); oDiv1.style.left = iTarget+'px'; } else { oDiv1.style.left = oDiv1.offsetLeft+speed+'px'; } },30) } } </script> </head> <body> <input id="btn1" type="button" value="到300" /> <input id="btn2" type="button" value="到800" /> <div id="div1"> </div> <div id="div2"> </div> <div id="div3"> </div> </body> </html>
慕瓜9220888
慕瓜9220888