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;width: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>

你可能感兴趣的:(js)