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 ！