a-ling

导航

多物体运动 

 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         </style>
14     </head>
15     <body>
16         <div></div>
17         <div></div>
18         <div></div>
19         <script>
20             var aDiv = document.getElementsByTagName('div');
21             for(var i = 0;i < aDiv.length;i ++){
22                 aDiv[i].timer = null;
23                 aDiv[i].onmouseover = function(){
24                     startMove(this,400);
25                 }
26                 aDiv[i].onmouseout = function(){
27                     startMove(this,100);
28                 }
29             }
30             
31             function startMove(obj,iTarget){
32                 clearInterval(obj.timer);
33                 
34                 obj.timer = setInterval(function(){
35                     var speed = (iTarget - obj.offsetWidth)/6;
36                     
37                     speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
38                     
39                     if(obj.offsetWidth == iTarget){
40                         clearInterval(obj.timer);
41                     }else{
42                         obj.style.width = obj.offsetWidth + speed + 'px';
43                     }
44                 },30)
45             }
46         </script>
47     </body>
48 </html>

 效果：

 

posted on 2017-04-12 16:29  a-ling  阅读(147)  评论(0)  编辑  收藏  举报