回首頁 與我們連絡 網站地圖 加入我的最愛



 

CSS與JavaScript-動態漸層文字層次堆疊




什麼叫:動態漸層文字層次堆疊?在你進入本網頁的時候是否注意到下方的文字字串變化呢?這就是動態漸層文字層次堆疊,沒看清楚嗎? 按我再看一次

  

  


這個效果必須先在CSS樣式表中先決定三個層次的文字字串位置及其基本樣式,但是我們並不設定文字字串的外觀顏色,那要在哪裡設呢?我們把文字字串的外觀顏色保留到JavaScript程式中設定,由JavaScript程式動態設定各層次文字字串的外觀顏色,同時利用JavaScript程式來控制各個層次文字的出現與否!

標準的網頁內容開頭:
<html>
<HEAD>
<title>CSS與JavaScript範例1</title>

加入CSS樣式宣告內容:別忘了加上註解符號。
<STYLE>
<!--

定義三組用來作為漸成文字堆疊層次的網頁文字樣式:在主文中(包括在<BODY>與</BODY>標籤之中的網頁內容)凡是遇到網頁標籤為<div>,並且在<div>標籤中加註樣式類別時,就將其被包括在<div>與</div>網頁標籤中的字串文字格式定為我們所宣告的網頁文字樣式:

.Style1 {Left: 20px; Top: 20px; Font-Size:18pt; Font-Weight: bold; Position: absolute; Z-index:1;}
.Style2 {Left: 40px; Top: 30px; Font-Size:24pt;Position: absolute;Z-index:2;}
.Style3 {Left: 60px; Top: 50px; Font-Size:16pt; Font-Weight: bold; Position: absolute;Z-index:3;}

加註樣式類別為Style1CSS樣式性質宣告將使網頁標籤的文字字串擁有粗體、字體大小為18pt的外觀樣式,同時文字字串的位置被安排定位在:瀏覽器視窗從左邊緣算來第20個像素的位置,從上邊緣算來第20個像素的位置,特別要注意的是:這個層次的’z-index’屬性值為1。

加註樣式類別為Style2CSS樣式性質宣告將使網頁標籤的文字字串擁有字體大小為24pt的外觀樣式,同時文字字串的位置被安排定位在:瀏覽器視窗從左邊緣算來第40個像素的位置,從上邊緣算來第30個像素的位置,這個層次的’z-index’屬性值為2。

加註樣式類別為Style3CSS樣式性質宣告將使網頁標籤的文字字串擁有粗體、字體大小為16pt的外觀樣式,同時文字字串的位置被安排定位在:瀏覽器視窗從左邊緣算來第60個像素的位置,從上邊緣算來第50個像素的位置,這個層次的’z-index’屬性值為3。

結束CSS樣式宣告內容:別忘了加上註解符號。
-->
</STYLE>

加入JavaScript程式語言所撰寫的程式敘述:

<SCRIPT LANGUAGE="javascript">
<!--
//Valor 工作室-麻辣學園 http://www.twbts.com
var speed = 100
//文字字串色產變化的速度
var Count = 0 
//漸層文字字串的色彩變換次數變數宣告
var LevelCount = 1 
//層次變數計次宣告
var LevelText = new Array() 
//層次陣列宣告
LevelText[1] = "這就是" 
//第一個層次文字字串內容
LevelText[2] = "Dynamic HTML" 
//第二個層次文字字串內容
LevelText[3] = "動態漸層文字層次堆疊!" 
///第三個層次文字字串內容
var lay = new Array() 
//層次文字字串陣列宣告
ColorChange = "fedcba9876543210" 
//用來製造漸層文字字串的16進位色碼字串宣告
var TextColor= new Array() 
//層次文字字串最終顏色陣列宣告

function ColorText()
{
for(i = 1; i <= 3; i++)
{lay[i] = document.all("level"+i)}
//"level"為網頁中 <DIV>標籤內所指定的主id名稱

if(LevelCount <= 3)
{
if(Count >= ColorChange.length)
{
LevelCount++
Count = 0
setTimeout("ColorText()",speed)
}
else
{
c = ColorChange.charAt(Count)
TextColor [1]= "ff"+c+c+c+c 
//第一個層次的漸層文字字串顏色
TextColor [2]= c+c+"ff"+c+c 
//第二個層次的漸層文字字串顏色
TextColor [3]= c+c+c+c+"ff" 
//第三個層次的漸層文字字串顏色
lay[LevelCount].style.color = TextColor[LevelCount] 
//動態設定漸層文字字串顏色
lay[LevelCount].innerHTML = LevelText[LevelCount] 
//動態輸出漸層文字字串內容
Count++
setTimeout("ColorText()",speed)
}
}
}

// -->
</SCRIPT>

</HEAD>

開始主文(<BODY>標籤)並在網頁標籤<DIV>中直接加入我們所宣告的CSS屬性類別(class)設定CLASS="XXXX"同時,我們必須將<BODY>標籤內容加上onload="ColorText()"成為<BODY onload="ColorText()">,為何要修正成為這樣的內容?因為這樣當網頁被載入時就會引發JavaScript程式的ColorText區段的程式敘述而開始產生有三個漸層變化的文字字串層次效果。

在網頁標籤<div>中直接加入我們所宣告的CSS屬性類別(class)設定後,必須給被包括在<DIV>與</DIV>網頁標籤中的字串文字一個特有的辨別名稱(id)。請特別注意:id 的名稱內容必須是連續的編號名稱,同時主名稱必須配合JavaScript 程式來命名!(id="主名稱+連續數字編號")
<BODY onload="ColorText()">
<DIV id="level1" class="Style1"></DIV>
<DIV id="level2" class="Style2"></DIV>
<DIV id="level3" class="Style3"></DIV>

注意:<DIV>與</DIV>網頁標籤中並不需要加入文字字串,此處的文字字串內容將由 JavaScript 程式來動態產生!

結束主文(</BODY>)與網頁主體(</html>)標籤。
</BODY>
</html>

[實例展示]   [原始網頁內容]

 

CSS 教學文件
CSS入門講座
基礎網頁應用
進階網頁應用
結合JavaScript應用
 

本網頁內容由昱得資訊工作室楊宗誌(小誌 )製作(C) Copyright Valor-Studio since in 1993
非經正式書面同意,不得將全部或部分內容,以任何方式轉載於其他網站或用於任何商業行為