JS——运动事件2（多物体运动框架）

1》实现多div的运动（改变div宽度）

实现效果如下：

JS——运动事件2（多物体运动框架）

代码如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <style>
 9         div{
10             width: 100px;
11             height: 50px;
12             background: red;
13             margin: 30px;
14         }
15     </style>
16     <script>
17     var timer=null;
18     function Move(obj,iTarget){             //给函数传参，一个是div本身，一个是目标数值
19         clearInterval(obj.timer);           //关闭定时器（关闭的是div各自自身的定时器）
20         obj.timer=setInterval(function(){   //为每个div设置一个定时器动作
21             var iSpeed=(iTarget-obj.offsetWidth)/8;
22             if(iSpeed>0){
23                 iSpeed=Math.ceil(iSpeed);   //向上取值
24             }
25             else{
26                 iSpeed=Math.floor(iSpeed);  //向下取值
27             }
28             if(obj.offsetWidth==iTarget){
29                 clearInterval(obj.timer);
30             }
31             else{
32                 obj.style.width=obj.offsetWidth+iSpeed+'px'; 
33             }
34         },50)
35     }
36         
37     window.onload=function(){
38         var aDiv=document.getElementsByTagName('div');  //定义所有div
39         for(var i=0;i<aDiv.length;i++){                 //循环所有div
40             aDiv[i].timer=null;                         //让每个div都清除自己的定时器动作
41             aDiv[i].onmouseover=function(){     //鼠标移入
42                 Move(this,300);                         //引入两个参数，一个是div本身，一个是目标数值
43             }
44             aDiv[i].onmouseout=function(){      //鼠标移出
45                 Move(this,100);
46             }
47         }
48     }
49     </script>
50 </head>
51 <body>
52     <div></div>
53     <div></div>
54     <div></div>
55 </body>
56 </html>

View Code

解释如下：

2》实现多div的运动（改变div透明度）

实现效果如下：

解释如下：

//注意看划线的地方，改变的都是各自的div的透明度和timer。实现互不干扰的效果。即不用额外定义（var timer=null和var opacity=30）。

//其中，第21行代码的作用是：让每个div每次运动时，透明度都为30，而不会互相干扰到（干扰到其他div）。

//后面的obj.opacity即代表各自div的透明度值。

//后面的obj.timer即代表各自div的定时器动作。

2》实现多div的运动（不同div的运动变化）

原实现效果如下：

改变后效果如下：

js代码如下：

 1 window.onload=function(){
 2             var aDiv=document.getElementsByTagName('div');
 3             aDiv[0].onclick=function(){
 4                 Change(this,'width',300);
 5             };
 6             aDiv[1].onclick=function(){
 7                 Change(this,'height',200);
 8             }
 9             aDiv[2].onclick=function(){
10                 Change(this,'fontSize',50);
11             }
12         }
13         function getStyle(obj,attr){
14             if(obj.currentStyle){
15                 return obj.currentStyle[attr];
16             }
17             else{
18                 return getComputedStyle(obj,false)[attr];
19             }
20         }
21         function Change(obj,attr,iTarget){
22             clearInterval(obj.timer);
23             obj.timer=setInterval(function(){
24                 var iCur=parseInt(getStyle(obj,attr));
25                 var iSpeed=(iTarget-iCur)/8;
26                 iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
27 
28                 if(iTarget==iCur){
29                     clearInterval(obj.timer);
30                 }
31                 else{
32                     obj.style[attr]=iCur+iSpeed+'px';
33                 }
34             },50)
35         }

View Code

解释：

//第29-36行代码（上图黄色“{”标注的地方）：function getStyle(obj,attr)【引入此函数（包含两个参数，obj表示所改变的div本身；attr表示所改变的div的属性），用于获取需要改变的div的属性（注：此函数的应用可参考前面的代码[JS——getComputedStyle与currentStyle获取样式]）】。

//第37行代码：function Change(obj,attr,iTarget)【引入此函数（包含三个参数，其中obj和attr上面已经说明了；而iTarget表示目标值），用于改变div的属性的值（基本和第一个案例一样，只不过多了一个参数attr）】。

//第40行代码：var iCur=parseInt(getStyle(obj,attr)) 【parseInt()返回的是函数getStyle()中的值，注：parseInt() 函数可解析一个字符串，并返回一个整数】。

//第48行代码：obj.style[attr]=iCur+iSpeed+'px'【用于输出div改变后的属性的值】。

//第19-27行代码：对三个div进行不同的属性、值的调用。

秒客网

JS——运动事件2（多物体运动框架）

相关文章