JS运动之多物体框架--多个div变宽

ゝ一纸荒年。 2022-08-05 02:23 294阅读 0赞

如果只为div添加一个定时器的话，在多个div变宽的时候会发生问题，但是如果为每个div添加一个定时器，那么就可以实现多个物体变宽。注意：在多物体运动的情况下，所有东西不能共用。offset\*\*会跟border冲突导致不能得到想要的结果，在这里可以用getStyle（）函数代替。

1.  function getStyle(obj, name)  
    
2.  \{  
    
3.          if(obj.currentStyle)  
    
4.          \{  
    
5.                  return obj.currentStyle\[name\];  
    
6.          \}  
    
7.          else  
    
8.          \{  
    
9.                  return getComputedStyle(obj, false)\[name\];  
    
10.         \}  
    
11. \}

复制代码

1.  <!DOCTYPE HTML>  
    
2.  <html>  
    
3.  <head>  
    
4.  <meta charset="utf-8">  
    
5.  <title></title>  
    
6.  <style>  
    
7.  div\{  
    
8.          width:100px;  
    
9.          height:50px;  
    
10.         background:red;  
    
11.         margin:10px;  
    
12. \}  
    
13.   
    
14.   
    
15.   
    
16. </style>  
    
17.   
    
18.   
    
19. <script>  
    
20.   
    
21. window.οnlοad=function ()\{  
    
22.         var aDiv=document.getElementsByTagName('div');  
    
23.         for(var i=0;i<aDiv.length;i++)  
    
24.         \{          
    
25.                 aDiv\[i\].timer=null;//自定义属性，加一个定时器  
    
26.                 aDiv\[i\].οnmοuseοver=function ()  
    
27.                 \{  
    
28.                         startMove(this,400);  
    
29.                 \};  
    
30.                 aDiv\[i\].οnmοuseοut=function ()  
    
31.                 \{  
    
32.                         startMove(this,100);  
    
33.                 \};  
    
34.         \}  
    
35. \};  
    
36.   
    
37. var timer=null;  
    
38. function startMove(obj, iTarget)  
    
39. \{  
    
40.         clearInterval(obj.timer);  
    
41.         obj.timer=setInterval(function ()\{  
    
42.                 var speed=(iTarget-obj.offsetWidth)/6;  
    
43.                 speed=speed>0?Math.ceil(speed):Math.floor(speed);  
    
44.                   
    
45.                 if(obj.offsetWidth==iTarget)  
    
46.                 \{  
    
47.                         clearInterval(obj.timer);  
    
48.                 \}  
    
49.                 else  
    
50.                 \{  
    
51.                         obj.style.width=obj.offsetWidth+speed+'px';  
    
52.                 \}  
    
53.         \}, 30);  
    
54. \}  
    
55.   
    
56.   
    
57.   
    
58. </script>  
    
59. </head>  
    
60. <body  >  
    
61.      <div ></div>    
    
62.      <div ></div>    
    
63.      <div ></div>    
    
64.   
    
65. </body>  
    
66. </html>

复制代码

效果图：  
  
  
![20140723102201281.jpg][]   
![20140723102209564.jpg][]   
  
  
![20140723101939593.jpg][]   
  
  
  
  
![20140723101945343.jpg][]

[20140723102201281.jpg]: http://bbs.html5cn.org/data/attachment/forum/201407/24/141155l8fcjllhhhtpn7nj.jpg
[20140723102209564.jpg]: http://bbs.html5cn.org/data/attachment/forum/201407/24/141215td45ac4pl7oozr6z.jpg
[20140723101939593.jpg]: http://bbs.html5cn.org/data/attachment/forum/201407/24/141251mjup4j8uc4gmpul7.jpg
[20140723101945343.jpg]: http://bbs.html5cn.org/data/attachment/forum/201407/24/141328nba29q1ie1ebqgqb.jpg