示例演示：http://scboy.ik8.com/ColorInOut.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>ColorInOut</title>
<script language="javascript">
hexa = new Array(16);
for ( var i = 0; i < 10; i++ )
{
hexa[i] = i;
}
hexa[10] = "a";
hexa[11] = "b";
hexa[12] = "c";
hexa[13] = "d";
hexa[14] = "e";
hexa[15] = "f";
// 产生16进制数
function hex(i)
{
if ( i < 0 )
return "00";
else if ( i > 255 )
return "ff";
else
// floor去整数，后面取余数
return "" + hexa[Math.floor( i/16 )] + hexa[i%16];
}
// 设置背景颜色
function setbgColor( r, g, b )
{
var hr = hex(r);
var hg = hex(g);
var hb = hex(b);
// 渐变到白色
document.bgColor = "#" + hr + hg + hb;
// 渐变到红色
// document.bgColor = "#" + hr + "00" + "00";
// 渐变到绿色
// document.bgColor = "#" + "00" + hg + "00";
// 渐变到蓝色
// document.bgColor = "#" + "00" + "00" + hb;
}
var i = 0;
var sr = 0;
var sg = 0;
var sb = 0;
var er = 0;
var eg = 0;
var eb = 0;
var step = 0;
// 颜色渐变，step值越大渐变速度越慢
function jianbian( )
{
if ( i <= step )
{
setbgColor( Math.floor( sr * ((step - i )/step) ) + er * ( i/step ),
Math.floor( sg * ((step - i )/step) ) + eg * ( i/step ),
Math.floor( sb * ((step - i )/step) ) + eb * ( i/step ) );
i++;
// 每过0.1秒调用一次渐变
setTimeout( 'jianbian()', 100 );
}
}
// 淡出
function danchu()
{
i = 0;
sr = 0;
sg = 0;
sb = 0;
er = 255;
eg = 255;
eb = 255;
step = 255;
jianbian( );
}
// 淡入
function danru()
{
i = 0;
sr = 255;
sg = 255;
sb = 255;
er = 0;
eg = 0;
eb = 0;
step = 255;
jianbian( );
}
</script>
</head>
<body onLoad="danchu()" onUnload="danru()">
<h2>本页使用渐变背景颜色：</h2>
调入本页时，背景颜色从黑色渐变到白色<br>
退出本页时，背景颜色从白色渐变到黑色<br>
</body>
</html>
评论