Javascript 运动应用 02

JS运动应用

多个物体同时运动

例子：多个Div，鼠标移入变宽

单定时器，存在问题

每个Div一个定时器

多物体运动框架

定时器作为物体的属性

参数的传递：物体、目标值

例子：多个Div淡入淡出

所有东西都不能公用

属性与运动对象绑定：速度、其他属性值（如透明度等）

offset属性的Bug

有边框的Div变宽

用currentStyle代替offset

原有运动框架的问题

只能让某个值运动起来

如果想让其他值运动起来，要修改程序

扩展的运动框架

运动属性作为参数

封装opacity

小数的问题

 1 <style>
 2 div {200px; height:200px; margin:20px; float:left; background:yellow; border:10px solid black; font-size:14px;}
 3 </style>
 4 <script>
 5 window.onload=function ()
 6 {
 7     oDiv1=document.getElementById('div1');
 8     oDiv1.onmouseover=function (){ startMove(this,'width',400) }
 9     oDiv1.onmouseout=function (){ startMove(this,'width',200)}
10     
11     oDiv2=document.getElementById('div2');
12     oDiv2.onmouseover=function (){ startMove(this,'fontSize',100) }
13     oDiv2.onmouseout=function (){ startMove(this,'fontSize',20)}
14     
15     
16     }
17     
18     function startMove(obj,attr,iTarget)
19     {
20         clearInterval(obj.timer);
21         obj.timer=setInterval(function (){
22             var cur=parseInt(getStyle(obj,attr))
23             var speed=(iTarget-cur)/6;
24             speed=speed>0?Math.ceil(speed):Math.floor(speed);
25             if(cur==iTarget){clearInterval(obj.timer);}
26             else{ obj.style[attr]=cur+speed+'px'; }
27             
28             },30)
29         
30         }
31         
32         function getStyle(obj,name)
33         {
34             if(obj.currentStyle)
35             {
36                 return obj.currentStyle[name];
37                 }
38                 else{ return getComputedStyle(obj,false)[name]; }
39             }
40 
41 
42 
43 
44 
45 </script>
46 
47 
48 </head>
49 
50 <body>
51 <div id="div1"></div>
52 <div id="div2">333333332fffs</div>
53 </body>

任意值运动框架

/**/ 改变不了透明度。

效果思路

两边的按钮——淡入淡出

大图下拉——层级、高度变化

下方的li——多物体淡入淡出

下方的Ul——位置计算

左右按钮

淡入淡出

鼠标移到按钮上，按钮会消失

层级问题

按钮和遮罩上都得加上事件

 1 <style>
 2 div {200px; height:200px; margin:20px; float:left; background:red; filter:alpha(opacity:30); opacity:0.3;}
 3 </style>
 4 <script>
 5 window.onload=function ()
 6 {
 7     var aDiv=document.getElementsByTagName('div');
 8     
 9     for(var i=0;i<aDiv.length;i++)
10     {
11         aDiv[i].alpha=30;
12         
13         aDiv[i].onmouseover=function ()
14         {
15             startMove(this, 100);
16         };
17         aDiv[i].onmouseout=function ()
18         {
19             startMove(this, 30);
20         };
21     }
22 };
23 
24 //var alpha=30;
25 
26 function startMove(obj, iTarget)
27 {
28     clearInterval(obj.timer);
29     obj.timer=setInterval(function (){
30         var speed=(iTarget-obj.alpha)/6;
31         speed=speed>0?Math.ceil(speed):Math.floor(speed);
32         
33         if(obj.alpha==iTarget)
34         {
35             clearInterval(obj.timer);
36         }
37         else
38         {
39             obj.alpha+=speed;
40             
41             obj.style.filter='alpha(opacity:'+obj.alpha+')';
42             obj.style.opacity=obj.alpha/100;
43         }
44     }, 30);
45 }
46 </script>
47 </head>
48 
49 <body>
50 <div></div>
51 <div></div>
52 <div></div>
53 <div></div>
54 </body>

淡入淡出

/**/ 合并

 1 <style>
 2 div {200px; height:200px; margin:20px; float:left; background:yellow; border:10px solid black; filter:alpha(opacity:30); opacity:0.3;}
 3 </style>
 4 <script>
 5 window.onload=function ()
 6 {
 7     var oDiv1=document.getElementById('div1');
 8     
 9     oDiv1.onmouseover=function ()
10     {
11         startMove(this, 'opacity', 100);
12     };
13     oDiv1.onmouseout=function ()
14     {
15         startMove(this, 'opacity', 30);
16     };
17 };
18 
19 function getStyle(obj, name)
20 {
21     if(obj.currentStyle)
22     {
23         return obj.currentStyle[name];
24     }
25     else
26     {
27         return getComputedStyle(obj, false)[name];
28     }
29 }
30 
31 function startMove(obj, attr, iTarget)
32 {
33     clearInterval(obj.timer);
34     obj.timer=setInterval(function (){
35         var cur=0;
36         
37         if(attr=='opacity')
38         {
39             cur=Math.round(parseFloat(getStyle(obj, attr))*100);
40         }
41         else
42         {
43             cur=parseInt(getStyle(obj, attr));
44         }
45         
46         var speed=(iTarget-cur)/6;
47         speed=speed>0?Math.ceil(speed):Math.floor(speed);
48         
49         if(cur==iTarget)
50         {
51             clearInterval(obj.timer);
52         }
53         else
54         {
55             if(attr=='opacity')
56             {
57                 obj.style.filter='alpha(opacity:'+(cur+speed)+')';
58                 obj.style.opacity=(cur+speed)/100;
59                 
60                 document.getElementById('txt1').value=obj.style.opacity;
61             }
62             else
63             {
64                 obj.style[attr]=cur+speed+'px';
65             }
66         }
67     }, 30);
68 }
69 </script>
70 </head>
71 
72 <body>
73 <div id="div1"></div>
74 <input type="text" id="txt1" />
75 </body>

真任意