1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 #div1{width: 100px; height: 100px;background-color:red;position: absolute; 8 left: 600px;top: 50px;} 9 #div2{width: 1px; height: 300px;background-color:black;position: absolute; 10 left: 300px;top: 0px;} 11 </style> 12 <script> 13 function startMove(){ 14 var oDiv=document.getElementById('div1'); 15 setInterval(function(){ 16 var speed=(300-oDiv.offsetLeft)/10; 17 speed=speed>0?Math.ceil(oDiv.offsetLeft+speed):Math.floor(oDiv.offsetLeft+speed); 18 oDiv.style.left=speed+'px'; 19 },30) 20 } 21 </script> 22 </head> 23 <body> 24 <input type="button" value="缓冲运动" onclick="startMove()" /> 25 <div id="div1"> 26 </div> 27 <div id="div2"> 28 </div> 29 </body> 30 </html>