运动---第三课时

今天吃得很饱。会长生日快乐:)

以前写文章都是解释加上代码，现在偷个懒，直接把解释写在代码注释里了，自己感觉蛮方便的。今天花了很长时间总结这个，都用来找BUG了。。。

宽度变长的div---初级版

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>div变宽</title>
 6 <style>
 7     div{width:100px;height:30px;background:#99CC66;margin-bottom:20px;}
 8 </style>
 9 <script>
10     window.onload=function(){
11         var oDiv=document.getElementById('div1');
12         oDiv.onmouseover=function(){
13             startMove(300);
14         };
15         oDiv.onmouseout=function(){
16             startMove(100);
17         }
18     };
19     
20     var timer=null;
21     clearInterval(timer);
22     function startMove(iTarget){
23         var oDiv=document.getElementById('div1');
24         var iSpeed=(iTarget-oDiv.offsetWidth)/8;
25         iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
26         timer=setInterval(function(){
27             if(oDiv.offsetWidth==iTarget){
28                 clearInterval(timer);
29             }
30             else{
31                 oDiv.style.width=oDiv.offsetWidth+iSpeed+'px';
32             }
33         },30)
34     };
35 </script>
36 </head>
37 
38 <body>
39 <div id="div1"></div>
40 </body>
41 </html>

宽度变长的div---改进版

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>div变宽改进版</title>
 6 <style>
 7     div{width:100px;height:30px;background:#00FFFF;margin-top:10px;}
 8 </style>
 9 <script type="text/javascript">
10     window.onload=function(){
11         var oDiv=document.getElementsByTagName('div');
12         var i=0;
13         for(i=0;i<oDiv.length;i++){　　　　　　　　//通过循环来获取每一个事件
14             oDiv[i]=null;
15             oDiv[i]=onmouseover=function(){
16                 startMove(this,200);
17             }
18             oDiv[i]=onmouseout=function(){
19                 startMove(this,100)
20             }
21         }
22     }
23     
24     function startMove(obj,iTarget){　　　　　　　　//传递两个参数
25         clearInterval(obj.timer);　　　　　　　　　　　//代表当前选中的那个div的事件
26         obj.timer=setInterval(function(){
27             var iSpeed=(iTarget-obj.offsetWidth)/8;
28             iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
29             if(iTarget==obj.offsetWidth)
30             {
31                 clearInterval(obj.timer);
32             }
33             else
34             {
35                 obj.style.width=obj.offsetWidth+iSpeed+'px';//火狐提示这个位置没有定义，奇了怪了，怎么会没有定义呢，天理不容啊
36             }
37         },30)
38     }
39 </script>
40 </head>
41 
42 <body>
43 <div></div>
44 <div></div>
45 <div></div>
46 </body>
47 </html>

 多个div的淡入淡出

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>多个div淡入淡出</title>
 6 <style>
 7 div{width:100px;height:100px;background:#0000FF;float:left;margin-left:20px;opacity:0.3;}
 8 </style>
 9 <script>
10 window.onload=function(){
11     var aDiv=document.getElementsByTagName('div');
12     var i=0;
13     for(i=0;i<aDiv.length;i++){
14         aDiv[i].alpha=30;　　　　　　//初始化不透明度
15         aDiv[i].onmouseover=function(){
16             startMove(this,100)
17         }
18         aDiv[i].onmouseout=function(){
19             startMove(this,30)
20         }
21     }
22 }
23     function startMove(obj,iTarget){
24         clearInterval(obj.timer);
25         obj.timer=setInterval(function(){
26             var iSpeed=(iTarget-obj.alpha)/8;
27             iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
28             if(obj.alpha==iTarget){
29                 clearInterval(obj.timer);
30             }
31             else{
32                 obj.alpha+=iSpeed;　　　　　　　　　　//多个元素的运动，需要把事件确定到每个元素，不能有公用的
33                 obj.style.filter='alpha(opacity:'+obj.alpha+')';
34                 obj.style.opacity=obj.alpha/100;
35             }
36         },30);
37     }
38 </script>
39 </head>
40 
41 <body>
42 <div></div>
43 <div></div>
44 <div></div>
45 <div></div>
46 <div></div>
47 <div></div>
48 <div></div>
49 <div></div>
50 <div></div>
51 <div></div>
52 </body>
53 </html>

offsetWidth-----在运动过程中会出现BUG，offsetWidth包括border，不懂的可以参见上一篇文章的图

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>offsetWidth</title>
 6 <style>
 7     #div1{width:100px;height:100px;background:#0000FF;border:2px solid #00FF00;}
 8 </style>
 9 <script>
10     setInterval(
11     function(){
12     var oDiv=document.getElementById('div1');
13     oDiv.style.width=oDiv.offsetWidth-1+'px';},30)　　　　、//当使用这个属性的时候，div会向右伸展，反而不会向左减小；主要是因为div的border影响了。Div.style.width=oDiv.offsetWidth-1;例如：100px=102-1=101px,div.width增加了一个像素（第一次）-----101px=103-1=102px,div.width又增加了一个像素（第二次）...以此类推
14 </script>
15 </head>
16 
17 <body>
18 <div id="div1"></div>
19 </body>
20 </html>

使用getStyle函数

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>offsetWidth</title>
 6 <style>
 7     #div1{width:100px;height:100px;background:#0000FF;border:2px solid #00FF00;}
 8 </style>
 9 <script>
10     function getStyle(obj,attr){　　　　　　//使用该函数获取非行间样式
11         if(obj.currentStyle){
12             return obj.currentStyle[attr];
13         }
14         else{
15             return getComputedStyle(obj,false)[attr];
16         }
17     }
18     setInterval(
19     function(){
20     var oDiv=document.getElementById('div1');
21     oDiv.style.width=parseInt(getStyle(oDiv,'width'))-1+'px';//对行间样式没有作用
22     },30)
23 </script>
24 </head>
25 
26 <body>
27 <div id="div1"></div>
28 </body>
29 </html>

 任意值的变化

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>无标题文档</title>
 6 <style>
 7     div{width:100px;height:20px;background:#666666;border:2px solid black;margin-top:20px;}
 8 </style>
 9 <script>
10     window.onload=function(){
11         var aDiv=document.getElementsByTagName('div');
12         var i=0;
13         for(i=0;i<aDiv.length;i++){
14             aDiv[i].timer=null;
15             aDiv[i].onmouseover=function(){
16                 startMove(this,200);
17             }
18             aDiv[i].onmouseout=function(){
19                 startMove(this,100);
20             }
21         }
22     };
23 
24 
25     function getStyle(obj,attr){
26         if(obj.currentStyle){
27             return obj.currentStyle[attr];
28         }
29         else{
30             return getComputed(obj,false)[attr];
31         }
32     };
33     
34     function startMove(obj,iTarget){
35         clearInterval(obj.timer);
36         obj.timer=setInterval(function(){
37             var iSpeed=(iTarget-obj.offsetWidth)/8;
38             iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
39             if(obj.offsetWidth==iTarget){
40                 clearInterval(obj.timer);
41             }
42             else{
43                 obj.style.width=obj.offsetWidth+iSpeed+'px';
44             }
45             
46             
47         },30)
48     };
49 </script>
50 </head>
51 
52 <body>
53 <div></div>
54 <div></div>
55 <div></div>
56 </body>
57 </html>

任意值2

 1 function getStyle(obj,attr){
 2         if(obj.currentStyle){
 3             return obj.currentStyle[attr];
 4         }
 5         else{
 6             return getComputedStyle(obj,false)[attr];
 7         }
 8     };
 9     
10     function startMove(obj,iTarget){
11         clearInterval(obj.timer);
12         obj.timer=setInterval(function(){
13             var iCurrent=parseInt(getStyle(obj,'width'));　　　　//获取样式并且取整
14             var iSpeed=(iTarget-iCurrent)/8;
15             iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
16             if(iCurrent==iTarget){
17                 clearInterval(obj.timer);
18             }
19             else{
20                 obj.style.width=iCurrent+iSpeed+'px';
21             }
22             
23             
24         },30)
25     };

任意值3

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <style>
 5 div {width:100px; height:50px; font-size:12px; background:red; margin-top:50px; border:2px solid black;}
 6 </style>
 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 8 <title>无标题文档</title>
 9 <script type="text/javascript">
10 window.onload=function()
11 {
12     var aDiv=document.getElementsByTagName('div');
13     
14     aDiv[0].onclick=function(){　　　　　　　　//对应下面的第一个图片
15         startMove(this,'width',200)
16     };
17     aDiv[1].onclick=function(){　　　　　　　　//对应第二幅图
18         startMove(this,'height',200)
19     };
20     aDiv[2].onclick=function(){　　　　　　　　//对应第三幅图
21         startMove(this,'fontSize',40)　　　　 //S要大写
22     };
23     aDiv[3].onclick=function(){　　　　　　　　//对应第四幅图
24         startMove(this,'borderWidth',20)　　 //注意W要大写
25     };
26 };
27 
28 function getStyle(obj, attr)
29 {
30     if(obj.currentStyle)
31     {
32         return obj.currentStyle[attr];
33     }
34     else
35     {
36         return getComputedStyle(obj, false)[attr];
37     }
38 }
39 
40 function startMove(obj, attr, iTarget)
41 {
42     clearInterval(obj.timer);
43     obj.timer=setInterval(function (){
44         var iCur=parseInt(getStyle(obj, attr));
45         var iSpeed=(iTarget-iCur)/8;
46         iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
47         
48         if(iCur==iTarget)
49         {
50             clearInterval(obj.timer);
51         }
52         else
53         {
54             obj.style[attr]=iCur+iSpeed+'px';
55         }
56     }, 30)
57 }
58 </script>
59 </head>
60 
61 <body>
62 <div></div>
63 <div></div>
64 <div>
65 123
66 </div>
67 <div></div>
68 </body>
69 </html>

效果图

暂时到这儿，欢迎纠错:)

posted @ 2013-05-29 21:05  Paxster  阅读(225)  评论(0)  编辑  收藏  举报