褪色技术的实现

来源：互联网发布：皮卡堂怎么刷金卡软件编辑：程序博客网时间：2024/04/25 11:52

采用Ajax技术所实现的页面中，为了能够更加清楚地表现出页面中局部数据信息的改变，往往采用褪色技术对发生改变的部分进行特殊的标注，但这种标注会随着内容变旧逐步消失。下面介绍一下具体的实现方式。

在Eclipse中新建一个项目，项目的名称为“P46_Color”。首先，新建一个HTML文档，页面名称为“main.html”。该页面实现的效果如图4-7所示。对于页面中黄色部分显示出的数据会随着时间的推移慢慢消失。

在该例中实现的是从XML文档中读取指定位置的数据信息，然后在HTML页面中进行显示，本例中所使用的XML文档的源代码如下所示。在页面中主要使用了定时器动态控制颜色的变化。

<HTML>

<HEAD>

图4-7 褪色效果

</HEAD>

<body>

<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>

本例中所使用的层叠样式表文件与前面相同，不再赘述。本例中并没有实现与服务器端数据库进行关联的效果，读者可以尝试在本例基础上进行调整，以动态获取数据库中的数据信息，采用褪色技术进行显示。