下面是一段简明的代码:
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>黄腿显示</title>
</head>
<body>
<form id="form1" method="post">
<div id="root" style="left:20px; top:20px;">
<div id="news">
欢迎使用黄腿技术
</div>
</div>
</form>
****************JavaScript脚本*******************
<script language="javascript">
var speed = 8;//颜色渐变速度
var timers;//定时器对象数组
news.style.backgroundColor = "#ffff00";
news.style.cursor = "hand";
timers = setTimeout("changeColor()",100);
function changeColor()
{
var color = news.style.backgroundColor;
var color_rg = color.slice(1,5);//获得rgb之rg部分
var color_b = parseInt(color.slice(5),16) + speed;//获得rgb之b部分,转换为十进制然后加一个整数向白色靠近
if(color_b < 256)
{
var b1 = Math.floor((color_b / 16)).toString(16);//转换为b的16进制
var b2 = (color_b % 16).toString(16);
news.style.backgroundColor = "#" + color_rg + b1 + b2;//设置新的颜色
timers = setTimeout("changeColor()",100);
}
else
{
clearTimeout(timers);//褪色完毕,停止计时器
}
}
</script>
*********************************************
</body>
</html>
这个是对于静态内容的黄褪处理.实际应用中可以根据需要对动态的内容进行黄褪处理.
对于颜色来说,rgb三个部分可以都可以采用类似于此例中b部分渐变的样式来达到自己想要的颜色渐变效果.
渐变速度由定时器的间隔和speed每次渐变的步幅来控制.
PS:代码中第一个setTimeout()是设置什么时候开始褪色的计时器.而第二个setTimeout()是设置渐变时间的间隔的计时器.
javascript的parseInt()函数需要注意,因为parseInt("08")就会出错,因为js会把它作为一个八进制数处理,而八进制数中不存在'8',
正确的使用方式是parseInt("08",10)这样就会将其正确地转换为十进制数.
Yan:更确切的说,黄褪技术是一种JS实现的缓慢褪色特效...