关于淡入淡出效果的实现,本站已经有文章介绍过,而本文介绍的是通过 javascript ,让所有的页面内容(可以设置背景色的元素)都能有淡入淡出效果,而我们需要做的只是给需要效果的元素设置ID和 className 。按照一定规则,你可以随意定义淡入淡出的颜色。
-
-
<script type= "text/javascript">
-
<!--
-
// 说明:用 javascript 让所有页面内容都有淡入淡出效果
-
// 整理:http://www.codebit.cn
-
-
// @name The Fade Anything Technique
-
// @namespace http://www.axentric.com/aside/fat/
-
// @version 1.0-RC1
-
// @author Adam Michela
-
-
var Fat = {
-
make_hex : function (r,g,b )
-
{
-
r = r. toString ( 16 ); if (r. length == 1 ) r = '0' + r;
-
g = g. toString ( 16 ); if (g. length == 1 ) g = '0' + g;
-
b = b. toString ( 16 ); if (b. length == 1 ) b = '0' + b;
-
return "#" + r + g + b;
-
},
-
fade_all : function ( )
-
{
-
var a = document. getElementsByTagName ( "*" );
-
for ( var i = 0; i < a. length; i++ )
-
{
-
var o = a [i ];
-
var r = /fade-?(/w{3,6})?/. exec (o. className );
-
if (r )
-
{
-
if (!r [ 1 ] ) r [ 1 ] = "";
-
if (o. id ) Fat. fade_element (o. id, null, null, "#"+r [ 1 ] );
-
}
-
}
-
},
-
fade_element : function (id, fps, duration, from, to )
-
{
-
if (!fps ) fps = 30;
-
if (!duration ) duration = 3000;
-
if (!from || from== "#" ) from = "#FFFF33";
-
if (!to ) to = this. get_bgcolor (id );
-
var frames = Math. round (fps * (duration / 1000 ) );
-
var interval = duration / frames;
-
var delay = interval;
-
var frame = 0;
-
if (from. length < 7 ) from += from. substr ( 1, 3 );
-
if (to. length < 7 ) to += to. substr ( 1, 3 );
-
var rf = parseInt (from. substr ( 1, 2 ), 16 );
-
var gf = parseInt (from. substr ( 3, 2 ), 16 );
-
var bf = parseInt (from. substr ( 5, 2 ), 16 );
-
var rt = parseInt (to. substr ( 1, 2 ), 16 );
-
var gt = parseInt (to. substr ( 3, 2 ), 16 );
-
var bt = parseInt (to. substr ( 5, 2 ), 16 );
-
var r,g,b,h;
-
while (frame < frames )
-
{
-
r = Math. floor (rf * ( (frames-frame ) /frames) + rt * (frame/frames ) );
-
g = Math. floor (gf * ( (frames-frame ) /frames) + gt * (frame/frames ) );
-
b = Math. floor (bf * ( (frames-frame ) /frames) + bt * (frame/frames ) );
-
h = this. make_hex (r,g,b );
-
setTimeout ( "Fat.set_bgcolor('"+id+ "','"+h+ "')", delay );
-
-
frame++;
-
delay = interval * frame;
-
}
-
setTimeout ( "Fat.set_bgcolor('"+id+ "','"+to+ "')", delay );
-
},
-
set_bgcolor : function (id, c )
-
{
-
var o = document. getElementById (id );
-
o. style. backgroundColor = c;
-
},
-
get_bgcolor : function (id )
-
{
-
var o = document. getElementById (id );
-
while (o )
-
{
-
var c;
-
if (window. getComputedStyle ) c = window. getComputedStyle (o, null ). getPropertyValue ( "background-color" );
-
if (o. currentStyle ) c = o. currentStyle. backgroundColor;
-
if ( (c != "" && c != "transparent" ) || o. tagName == "BODY" ) { break; }
-
o = o. parentNode;
-
}
-
if (c == undefined || c == "" || c == "transparent" ) c = "#FFFFFF";
-
var rgb = c. match ( /rgb/s*/(/s*(/d{1,3})/s*,/s*(/d{1,3})/s*,/s*(/d{1,3})/s*/)/ );
-
if (rgb ) c = this. make_hex (parseInt (rgb [ 1 ] ),parseInt (rgb [ 2 ] ),parseInt (rgb [ 3 ] ) );
-
return c;
-
}
-
}
-
-
window. onload = function ( ) {
-
Fat. fade_all ( );
-
}
-
//-->
-
</script>
-