javascript 让所有页面内容都有淡入淡出效果

关于淡入淡出效果的实现，本站已经有文章介绍过，而本文介绍的是通过 javascript ，让所有的页面内容（可以设置背景色的元素）都能有淡入淡出效果，而我们需要做的只是给需要效果的元素设置ID和 className 。按照一定规则，你可以随意定义淡入淡出的颜色。

1.  
2. <script type= "text/javascript">
3. <!--
4. // 说明：用 javascript 让所有页面内容都有淡入淡出效果
5. // 整理：http://www.codebit.cn
6.  
7. // @name      The Fade Anything Technique
8. // @namespace http://www.axentric.com/aside/fat/
9. // @version   1.0-RC1
10. // @author    Adam Michela
11.  
12. var Fat = {
13.     make_hex : function (r,g,b ) 
14.     {
15.         r = r. toString ( 16 ); if (r. length == 1 ) r = '0' + r;
16.         g = g. toString ( 16 ); if (g. length == 1 ) g = '0' + g;
17.         b = b. toString ( 16 ); if (b. length == 1 ) b = '0' + b;
18.         return "#" + r + g + b;
19.     },
20.     fade_all : function ( )
21.     {
22.         var a = document. getElementsByTagName ( "*" );
23.         for ( var i = 0; i < a. length; i++ ) 
24.         {
25.             var o = a [i ];
26.             var r = /fade-?(/w{3,6})?/. exec (o. className );
27.             if (r )
28.             {
29.                 if (!r [ 1 ] ) r [ 1 ] = "";
30.                 if (o. id ) Fat. fade_element (o. id, null, null, "#"+r [ 1 ] );
31.             }
32.         }
33.     },
34.     fade_element : function (id, fps, duration, from, to ) 
35.     {
36.         if (!fps ) fps = 30;
37.         if (!duration ) duration = 3000;
38.         if (!from || from== "#" ) from = "#FFFF33";
39.         if (!to ) to = this. get_bgcolor (id );
40.         
41.         var frames = Math. round (fps * (duration / 1000 ) );
42.         var interval = duration / frames;
43.         var delay = interval;
44.         var frame = 0;
45.         
46.         if (from. length < 7 ) from += from. substr ( 1, 3 );
47.         if (to. length < 7 ) to += to. substr ( 1, 3 );
48.         
49.         var rf = parseInt (from. substr ( 1, 2 ), 16 );
50.         var gf = parseInt (from. substr ( 3, 2 ), 16 );
51.         var bf = parseInt (from. substr ( 5, 2 ), 16 );
52.         var rt = parseInt (to. substr ( 1, 2 ), 16 );
53.         var gt = parseInt (to. substr ( 3, 2 ), 16 );
54.         var bt = parseInt (to. substr ( 5, 2 ), 16 );
55.         
56.         var r,g,b,h;
57.         while (frame < frames )
58.         {
59.             r = Math. floor (rf * ( (frames-frame ) /frames) + rt * (frame/frames ) );
60.             g = Math. floor (gf * ( (frames-frame ) /frames) + gt * (frame/frames ) );
61.             b = Math. floor (bf * ( (frames-frame ) /frames) + bt * (frame/frames ) );
62.             h = this. make_hex (r,g,b );
63.         
64.             setTimeout ( "Fat.set_bgcolor('"+id+ "','"+h+ "')", delay );
65.  
66.             frame++;
67.             delay = interval * frame; 
68.         }
69.         setTimeout ( "Fat.set_bgcolor('"+id+ "','"+to+ "')", delay );
70.     },
71.     set_bgcolor : function (id, c )
72.     {
73.         var o = document. getElementById (id );
74.         o. style. backgroundColor = c;
75.     },
76.     get_bgcolor : function (id )
77.     {
78.         var o = document. getElementById (id );
79.         while (o )
80.         {
81.             var c;
82.             if (window. getComputedStyle ) c = window. getComputedStyle (o, null ). getPropertyValue ( "background-color" );
83.             if (o. currentStyle ) c = o. currentStyle. backgroundColor;
84.             if ( (c != "" && c != "transparent" ) || o. tagName == "BODY" ) { break; }
85.             o = o. parentNode;
86.         }
87.         if (c == undefined || c == "" || c == "transparent" ) c = "#FFFFFF";
88.         var rgb = c. match ( /rgb/s*/(/s*(/d{1,3})/s*,/s*(/d{1,3})/s*,/s*(/d{1,3})/s*/)/ );
89.         if (rgb ) c = this. make_hex (parseInt (rgb [ 1 ] ),parseInt (rgb [ 2 ] ),parseInt (rgb [ 3 ] ) );
90.         return c;
91.     }
92. }
93.  
94. window. onload = function ( ) {
95.     Fat. fade_all ( );
96. }
97. //-->
98. </script>
99.  

给你希望有淡入淡出效果的元素设置一个值为 fade 的 className，如：class="fade"，默认的淡入淡出颜色是 #FFFF33，如果你想用其他颜色，只需要在 className 后面加上 "-你期望的颜色"，如：class="fade-0000FF"，这样的话，淡入淡出的颜色就是蓝色，是不是很方便？注意，元素一定要有 ID ！