为了能够更加清楚地提示读者页面中局部数据的改变,使用"黄褪"技术即可达到这个效果,当然也可以是红褪或者绿褪等等 o(∩_∩)o...
下面是一段简明的代码:
脚本代码
1 <html xmlns="http://www.w3.org/1999/xhtml">
2 <head>
3 <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
4 <title>黄腿显示</title>
5 </head>
6 <body>
7 <form id="form1" method="post">
8 <div id="root" style="left:20px; top:20px;">
9 <div id="news">
10 欢迎使用黄腿技术
11 </div>
12 </div>
13 </form>
14 ****************JavaScript脚本*******************
15 <script language="javascript">
16 var speed = 8;//颜色渐变速度
17 var timers;//定时器对象数组
18 news.style.backgroundColor = "#ffff00";
19 news.style.cursor = "hand";
20 timers = setTimeout("changeColor()",100);
21 function changeColor()
22 {
23 var color = news.style.backgroundColor;
24 var color_rg = color.slice(1,5);//获得rgb之rg部分
25 var color_b = parseInt(color.slice(5),16) + speed;//获得rgb之b部分,转换为十进制然后加一个整数向白色靠近
26
27 if(color_b < 256)
28 {
29 var b1 = Math.floor((color_b / 16)).toString(16);//转换为b的16进制
30 var b2 = (color_b % 16).toString(16);
31
32 news.style.backgroundColor = "#" + color_rg + b1 + b2;//设置新的颜色
33 timers = setTimeout("changeColor()",100);
34 }
35 else
36 {
37 clearTimeout(timers);//褪色完毕,停止计时器
38 }
39 }
40 </script>
41 *********************************************
42 </body>
43 </html>
这个是对于静态内容的黄褪处理.实际应用中可以根据需要对动态的内容进行黄褪处理.
对于颜色来说,rgb三个部分可以都可以采用类似于此例中b部分渐变的样式来达到自己想要的颜色渐变效果.
渐变速度由定时器的间隔和speed每次渐变的步幅来控制.
PS:代码中第一个setTimeout()是设置什么时候开始褪色的计时器.而第二个setTimeout()是设置渐变时间的间隔的计时器.
javascript的parseInt()函数需要注意,因为parseInt("08")就会出错,因为js会把它作为一个八进制数处理,而八进制数中不存在'8',
正确的使用方式是parseInt("08",10)这样就会将其正确地转换为十进制数.
Luke Skywalker in BlogJava
posted on 2007-09-18 12:50
行者吴江 阅读(462)
评论(0) 编辑 收藏 所属分类:
Java