采用Ajax技术所实现的页面中，为了能够更加清楚地表现出页面中局部数据信息的改变，往往采用褪色技术对发生改变的部分进行特殊的标注，但这种标注会随着内容变旧逐步消失。下面介绍一下具体的实现方式。
在Eclipse中新建一个项目，项目的名称为“P46_Color”。首先，新建一个HTML文档，页面名称为“main.html”。该页面实现的效果如图4-7所示。对于页面中黄色部分显示出的数据会随着时间的推移慢慢消失。
在该例中实现的是从XML文档中读取指定位置的数据信息，然后在HTML页面中进行显示，本例中所使用的XML文档的源代码如下所示。在页面中主要使用了定时器动态控制颜色的变化。
<HTML>
<HEAD>
<title>Main</title>
图
4-7
褪色效果
<link rel="stylesheet" href="style.css">
</HEAD>
<body>
<form id="Form1" method="post">
<div id="news_root" style="LEFT:20px; TOP:20px" class="root">
<div id="news_handle" class="handle">
定制窗口
<span style= ""></span></div>
<div id="news" class="text">
欢迎使用褪色技术
</div>
</div>
</form>
<script language="JavaScript">
//
颜色渐变的速度
var speed = 3;
//
颜色渐变时需要使用的定时器对象数组
var timers;
news.style.backgroundColor = "#ffff00";
news.style.cursor = "hand";
timers = setTimeout("changeColor()", 100);
function changeColor()
{
var color = news.style.backgroundColor;
//
当前背景色
(rgb)
的
rg
部分:如
#123456
的
1234
var color_rg = color.slice(1, 5);
//
当前背景色
(rgb)
的
b
部分:如
#123456
的
56
//
并将
b
部分增加一个数值,转换为
10
进制整数(向白色靠近)
var color_b = parseInt(color.slice(5), 16) + speed;
//
如果
b
部分不超过
255
if (color_b < 256)
{
//
求
b
的
16
进制形式
var b1 = Math.floor((color_b / 16)).toString(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>
本例中所使用的层叠样式表文件与前面相同，不再赘述。本例中并没有实现与服务器端数据库进行关联的效果，读者可以尝试在本例基础上进行调整，以动态获取数据库中的数据信息，采用褪色技术进行显示。
7556
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
