采用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>
本例中所使用的层叠样式表文件与前面相同，不再赘述。本例中并没有实现与服务器端数据库进行关联的效果，读者可以尝试在本例基础上进行调整，以动态获取数据库中的数据信息，采用褪色技术进行显示。
扫一扫
4593
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
