為了能夠更加清楚地提示讀者頁面中局部數據的改變,使用"黃褪"技術即可達到這個效果,當然也可以是紅褪或者綠褪等等 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
行者吳江 閱讀(471)
評論(0) 編輯 收藏 所屬分類:
Java