返回列表 上一主題 發帖

[教學] (教學第37篇) 堆疊 下篇

小誌
　暱稱: 小誌
　頭銜: 曾經也是水電工

管理員Rank: 9Rank: 9Rank: 9

帖子
1195 
主題
395 
精華
113 
積分
1747 
點名
0  
作業系統
Vista 
軟體版本
Office 2003 
閱讀權限
200 
性別
男 
來自
台灣 
註冊時間
2010-5-1 
最後登錄
2025-6-12 

2021牛年全勤獎章好學求知勳章熱烈參與勳章2017 雞年全勤獎章2018 狗年全勤獎章2019 豬年全勤獎章2020鼠年全勤獎章
1# 跳轉到 » 倒序看帖
打印
tT
發表於 2010-5-20 15:51 | 只看該作者

[教學] (教學第37篇) 堆疊 下篇

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

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




  • 定義一組用來作為第一層文字字串的網頁文字樣式：在主文中(包括在<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 //取得動態堆疊文字字串的長度
    10.         
    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屬性來更新網頁標籤元件所包括的內容喔！大家不妨使用其他屬性，試試會有何種情況發生！
收藏 分享
心安，平安   
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!

小誌
　暱稱: 小誌
　頭銜: 曾經也是水電工

管理員Rank: 9Rank: 9Rank: 9

帖子
1195 
主題
395 
精華
113 
積分
1747 
點名
0  
作業系統
Vista 
軟體版本
Office 2003 
閱讀權限
200 
性別
男 
來自
台灣 
註冊時間
2010-5-1 
最後登錄
2025-6-12 

2021牛年全勤獎章好學求知勳章熱烈參與勳章2017 雞年全勤獎章2018 狗年全勤獎章2019 豬年全勤獎章2020鼠年全勤獎章
2#
發表於 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>
    複製代碼
  • 大公告成，開啟網頁試試看！

    14-7.png
  1. <HTML>
  2. <HEAD>
  3. <TITLE>動態堆疊文字</TITLE>
  4. <STYLE>
  5. <!--
  6. .Style1{
  7. position:absolute;
  8. top:50px;
  9. left:50px;
  10. font-size:24pt;
  11. font-weight: bold;
  12. color: #0000ff;
  13. z-index:1;
  14. }

  16. .Style2{
  17. position:absolute;
  18. top:52px;
  19. left:52px;
  20. font-size:24pt;
  21. font-weight: bold;
  22. color: #ff0000;
  23. z-index:2;
  24. }
  25. -->
  26. </STYLE>

  28. <SCRIPT LANGUAGE="javascript">
  29. Speed = 1000
  30. Count = -1
  31. OutText = ""
  32. Text = "我就是喜歡你"

  34. function TextAct()
  35. {
  36. Word =Text.length
  37.         
  38. if(Count <= Word)
  39. {
  40. Count++
  41. OutText += Text.charAt(Count)
  42. document.all.maintext.innerHTML = OutText
  43. setTimeout("TextAct()",Speed)
  44. }
  45. }
  46. </SCRIPT>

  48. </HEAD>
  49. <BODY onload="TextAct()">
  50. <P CLASS="Style1" >我就是喜歡你</P>
  51. <DIV CLASS="Style2" ID="maintext"></DIV>
  52. </BODY>
  53. </HTML>
複製代碼
心安，平安   
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!

TOP

        靜思自在 : 人要自愛，才能愛普天下的人。
返回列表 上一主題