缓冲运动

 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>
View Code