JS多物体_任意值_链式

JS多物体_任意值_链式_缓冲运动

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4   <meta http-equiv="content-type" charset="utf-8" />
 5     <meta http-equiv="content-type" content="text/html" />
 6     <title>demo</title>
 7 </head>
 8 <body>
 9 
10 <div id="odiv" style="position:absolute;200px;height:100px;background:red;left:0;border:1px solid #333;"></div>
11 
12 
13 <script type="text/javascript">
14 
15 var odiv=document.getElementById('odiv');
16 
17 odiv.onmouseover=function(){
18 move(this,'width',500,function(){
19 move(odiv,'left',300,function(){
20 move(odiv,'height',500,function(){
21 move(odiv,'borderWidth',10)
22 });
23 });
24 });
25 }
26 
27 
28 function move(obj,arr,target,fn){
29     clearInterval(obj.dt);
30     obj.dt=setInterval(function(){
31     obj.ol=parseInt(obj.style[arr]);
32     if(obj.ol==target){
33         clearInterval(obj.dt);
34         if(fn) fn();
35     }else{
36     obj.speed=(target-obj.ol)/8;
37         obj.speed>0?obj.speed=Math.ceil(obj.speed):obj.speed=Math.floor(obj.speed);
38         obj.style[arr]=obj.ol+obj.speed+"px";
39     }
40     },30);
41 }
42 
43 
44 </script>
45 </body>
46 </html>