麻辣家族討論版版 - Powered by Discuz! Board

標題: [教學] (教學第37篇) 堆疊下篇 [打印本頁]

作者: 小誌 時間: 2010-5-20 15:51 標題: (教學第37篇) 堆疊下篇

動態層次疊字
所謂動態層次疊字，就是我們在網頁中建立兩個堆疊層次，當網頁載入時，第一層的堆疊會先出現在網頁中，而第二層的堆疊將會以動態變化的方式出現，同時第二層的堆疊會覆蓋在第一層的堆疊上。

實例學習：
在網頁中出現藍色文字字串的第一層堆疊，當我們將滑鼠移至藍色文字的層疊上時，將第一層堆疊的紅色文字字串一個字一個字的疊到第一層堆疊文字上：

[attach]782[/attach]

定義一組用來作為第一層文字字串的網頁文字樣式：在主文中(包括在<BODY>與</BODY>標籤之中的網頁內容)凡是在標籤中加註樣式類別為Style1的網頁標籤時，就將其被包括在網頁標籤中的字串文字格式定為我們所宣告的網頁文字樣式：
1. .Style1
2. {
3. position:absolute;
4. top:50px;
5. left:50px;
6. font-size:24pt;
7. font-weight: bold;
8. color: #0000ff;
9. z-index:1;
10. }
複製代碼
這樣一段CSS樣式性質宣告將使我們被加註樣式類別為Style1的網頁標籤的文字字串擁有藍色、粗體、字體大小為24pt的外觀樣式，同時文字字串的位置被安排定位在：瀏覽器視窗從左邊緣算來第５０個像素的位置，從上邊緣算來第５０個像素的位置，特別要注意的是：這個層次的’z-index’屬性值為１。
接著定義另一組標準的網頁標籤文字樣式：

在主文中(包括在<BODY>與</BODY>標籤之中的網頁內容)凡是在標籤中加註樣式類別為Style2的網頁標籤時，就將其被包括在網頁標籤中的字串文字格式定為我們所宣告的網頁文字樣式。這一組網頁標籤文字樣式在本範例中是作為打字特效的文字的樣式宣告：
1. .Style2
2. {
3. position:absolute;
4. top:52px;
5. left:52px;
6. font-size:24pt;
7. font-weight: bold;
8. color: #ff0000;
9. z-index2;
10. }
複製代碼
這一段CSS樣式性質宣告將使我們被加註樣式類別為Style2的網頁標籤的文字字串擁有紅色、粗體、字體大小為24pt的外觀樣式，雖然文字字串的外觀與Style1所宣告的相同，但是為了產生重疊的效果我們將文字字串的位置定位在：瀏覽器視窗從左邊緣算來第５２個像素的位置，從上邊緣算來第５２個像素的位置，特別要注意的是：這個層次的’z-index’屬性值為２。
堆疊打字特效程式區段：
1. <SCRIPT LANGUAGE="javascript">
2. Speed = 1000 //設定打字速度（文字出現速度）
3. Count = -1 //設定每次加入一個字
4. OutText = "" //預設輸出內容是空白
5. Text = "我就是喜歡你" //動態出現的疊層文字字串內容
7. function TextAct()
8. {
9. Word =Text.length //取得動態堆疊文字字串的長度
11. if(Count <= Word)
12. {
13. Count++
14. OutText += Text.charAt(Count)
15. //更新第二層堆疊的內容
16. document.all.maintext.innerHTML = OutText
17. setTimeout("TextAct()",Speed)
18. }
19. }
20. </SCRIPT>
複製代碼
對於程式內容，大家應該是沒問題了！不過提醒你注意一下程式碼第16行，小誌是使用innerHTML屬性來更新網頁標籤元件所包括的內容喔！大家不妨使用其他屬性，試試會有何種情況發生！

作者: 小誌 時間: 2010-5-20 15:54

在網頁標籤<P>中直接加入我們所宣告的CSS屬性類別(class)設定CLASS="Style1"，包括在<P>與</P>網頁標籤中的字串文字是我們用來顯示第一層次的文字字串內容。同時，我們必須將<BODY>標籤內容加上onload="TextAct()"，當網頁被載入時就會呼叫TextAct()函式產生第二個文字層次的打字效果。
1. <BODY onload="TextAct()">
2. <P CLASS="Style1" >我就是喜歡你</P>
複製代碼
接著，使用區塊標籤<DIV>，並在標籤內直接加入我們所宣告的CSS屬性類別(class)設定CLASS="Style2"，並且給被包括在<DIV>與</DIV>網頁標籤中的字串文字一個特有的辨別名稱ID="maintext"，注意：<DIV>與</DIV>中，目前並沒有包括任何內容，<DIV>與</DIV>中包括的內容會在程式執行後動態加入與更新。
1. <DIV CLASS="Style2" ID="maintext"></DIV>
複製代碼
大公告成，開啟網頁試試看！

[attach]783[/attach]

<HTML>
<HEAD>
<TITLE>動態堆疊文字</TITLE>
<STYLE>
<!--
.Style1{
position:absolute;
top:50px;
left:50px;
font-size:24pt;
font-weight: bold;
color: #0000ff;
z-index:1;
}
.Style2{
position:absolute;
top:52px;
left:52px;
font-size:24pt;
font-weight: bold;
color: #ff0000;
z-index:2;
}
-->
</STYLE>
<SCRIPT LANGUAGE="javascript">
Speed = 1000
Count = -1
OutText = ""
Text = "我就是喜歡你"
function TextAct()
{
Word =Text.length
if(Count <= Word)
{
Count++
OutText += Text.charAt(Count)
document.all.maintext.innerHTML = OutText
setTimeout("TextAct()",Speed)
}
}
</SCRIPT>
</HEAD>
<BODY onload="TextAct()">
<P CLASS="Style1" >我就是喜歡你</P>
<DIV CLASS="Style2" ID="maintext"></DIV>
</BODY>
</HTML>

複製代碼

歡迎光臨麻辣家族討論版版 (http://forum.twbts.com/)