返回列表 上一主題 發帖

[教學] (教學第38篇) 堆疊與元件位置

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

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

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

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

[教學] (教學第38篇) 堆疊與元件位置

元件, 堆, 位置
這一節是本教學最後一個單元，小誌將不在詳細的理論解說了！因為所有的物件、元件…等等的理論之前都談過了，現在是驗收的時刻了，小誌直接將之前所談的迴圈（for）、判斷敘述（if）、陣列物件(Array)、元件堆疊、元件位置控制等等，直接應用在本節的綜合演練範例中。

如果你一路將本教學閱讀至此，相信你已具備相當的JavaScript設計能力，所謂：「師父領進門、修行在個人」，小誌能給你的只是一塊塊單獨的積木，要如何將這些積木拼成堡壘，就得靠各位讀者自己囉，小誌誠心的希望大家在閱讀本書之後能設計出屬於自己的JavaScript，而不要到網路上直接將別人的成果拷貝到自己的網站中使用，或者是買本集JavaScript程式大全的書回來抄抄寫寫。呵∼小誌廢話太多了，不要見怪ㄚ！

綜合演練：亂數飛行集中定位的文字

何謂亂數飛行？亂數飛行就是我們不在CSS樣式表中直接指定文字字串的位置，因為如果在CSS樣式表中設定則文字字串的位置將是固定的！但是，我們可以使用JavaScript程式來動態的指定文字字串的位置。



收藏 分享
心安，平安   
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!

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

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

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

2021牛年全勤獎章好學求知勳章熱烈參與勳章2017 雞年全勤獎章2018 狗年全勤獎章2019 豬年全勤獎章2020鼠年全勤獎章
2#
發表於 2010-5-20 16:01 | 只看該作者

  • 這個效果必須先在CSS樣式表中先決定三個層次的文字字串的基本樣式，但是我們並不設定文字字串的位置，我們把文字字串的位置保留到JavaScript程式中動態設定，由JavaScript程式動態設定各層次文字字串的位置，同時利用JavaScript程式來控制各個層次文字的出現與否！

    定義三組用來作為漸成文字堆疊層次的網頁文字樣式：在主文中(包括在<BODY>與</BODY>標籤之中的網頁內容)凡是遇到網頁標籤為<DIV>，並且在<DIV>標籤中加註樣式類別時，就將其被包括在<DIV>與</DIV>網頁標籤中的字串文字格式定為我們所宣告的網頁文字樣式：
    1. .Style1{COLOR: #0000ff; FONT-SIZE: 16pt; POSITION: absolute;}
    2. .Style2{COLOR: #00ff00; FONT-SIZE: 16pt; POSITION: absolute;}
    3. .Style3{COLOR: #ff0000; FONT-SIZE: 16pt; POSITION: absolute;}
    複製代碼
    加註樣式類別為Style1的CSS樣式性質宣告將使網頁標籤的文字字串擁有藍色、字體大小為１６pt的外觀樣式。

    加註樣式類別為Style２的CSS樣式性質宣告將使網頁標籤的文字字串擁有綠色、字體大小為１６pt的外觀樣式。

    加註樣式類別為Style3的CSS樣式性質宣告將使網頁標籤的文字字串擁有紅色、字體大小為１６pt的外觀樣式。

  • 程式內容
    1. SCRIPT language="javascript">
    2. var speed = 5　//亂數變換位置的速度
    3. var Count = 0
    4. var Fcount = 50　//亂數變換位置的次數
    5. var TimeID
    6. var IsFly = false　//判斷是否進行飛行動作的旗標變數
    7. var lay

    9. //以下為亂數飛行字串初始的位置定位設定
    10. var StarFly = new Array()
    11. StarFly[1] = 0
    12. StarFly[2] = 50
    13. StarFly[3] = 0
    14. StarFly[4] = 50
    15. StarFly[5] = 0
    16. StarFly[6] = 50

    18. //以下為亂數飛行字串最後的位置定位設定
    19. var EndFly = new Array()
    20. EndFly[1] = 10　//第一層次亂數飛行字串最後的水平軸(Left)位置定位設定
    21. EndFly[2] = 30　//第一層次亂數飛行字串最後的垂直(Topt)位置定位設定
    22. EndFly[3] = 20　//第二層次亂數飛行字串最後的水平軸(Left)位置定位設定
    23. EndFly[4] = 40 //第二層次亂數飛行字串最後的垂直軸(Top)位置定位設定
    24. EndFly[5] = 30　//第三層次亂數飛行字串最後的水平軸(Left)位置定位設定
    25. EndFly[6] = 50　//第三層次亂數飛行字串最後的垂直軸(Top)位置定位設定

    27. function Roundtext(){

    29. for(var i = 1; i <=3; i++)
    30. {
    31. lay = document.all("fly"+i)　
    32. //"fly"為網頁中 <DIV>標籤內所指定的主id名稱
    33. lay.style.visibility = "visible"
    34. StarFly[i*2-1] = Math.round(Math.random()*document.body.clientWidth - lay.style.posWidth)
    35. StarFly[i*2] = Math.round(Math.random()*document.body.clientHeight- lay.style.posHeight)
    36. }

    38. Count++;
    39. if(IsFly==false)
    40. {
    41. IsFly = true;
    42. for(var i = 1; i <= 3; i++)
    43. {
    44. //動態亂數設定文字字串的水平位置(Left)
    45. lay.style.posLeft = Math.round(StarFly[i*2-1] + (EndFly[i*2] - StarFly[i*2-1])/Fcount * Count)
    46. //動態亂數設定文字字串的垂直位置(Top)
    47. lay.style.posTop = Math.round(StarFly[i*2] + (EndFly[i*2-1] - StarFly[i*2])/Fcount * Count)
    48. lay = document.all("fly"+i)

    50. if(Count <= Fcount){IsFly = false}
    51. }
    52. TimerID = setTimeout("Roundtext()",speed)
    53. }
    54. else{clearTimeout(TimeID)}
    55. }
    56. </SCRIPT>
    複製代碼
心安，平安   
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!

TOP

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

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

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

2021牛年全勤獎章好學求知勳章熱烈參與勳章2017 雞年全勤獎章2018 狗年全勤獎章2019 豬年全勤獎章2020鼠年全勤獎章
3#
發表於 2010-5-20 16:04 | 只看該作者

  • 開始主文(<BODY>標籤)並在網頁標籤<DIV>中直接加入我們所宣告的CSS屬性類別(class)設定CLASS="XXXX"，同時，我們必須將<BODY>標籤內容加上onload="Roundtext()"成為<BODY onload="Roundtext()">，當網頁被載入時就呼叫Roundtext()函式開始產生有三個層次亂數飛行而後集中定位的文字字串特效。

  • 在網頁標籤<div>中直接加入我們所宣告的CSS屬性類別(class)設定後，必須給被包括在<DIV>與</DIV>網頁標籤中的字串文字一個特有的辨別名稱(id)。請特別注意：id 的名稱內容必須是連續的編號名稱，同時主名稱必須配合JavaScript 程式來命名！(id="主名稱＋連續數字編號")
    1. <BODY onload="Roundtext()">
    2. <DIV class="Style1" id="fly1">亂數飛行集中定位的文字字串</DIV>
    3. <DIV class="Style2" id="fly2">亂數飛行集中定位的文字字串</DIV>
    4. <DIV class="Style3" id="fly3">亂數飛行集中定位的文字字串</DIV>
    複製代碼
    注意！！
    在<DIV>與</DIV>網頁標籤中必須加入各層次的文字字串，此處的文字字串並非由程式來動態產生！程式只有動態地來設定各層次文字字串的位置(Position)。


  • 加入結束網頁主文(</BODY>)與網頁主體(</html>)標籤，大公告成！
  1. <HTML>
  2. <HEAD>
  3. <TITLE>綜合演練</TITLE>
  4. <STYLE>
  5. <!--
  6. .Style1 {COLOR: #0000ff; FONT-SIZE: 16pt;  POSITION: absolute; }
  7. .Style2{COLOR: #00ff00; FONT-SIZE: 16pt; POSITION: absolute;}
  8. .Style3 {COLOR: #ff0000; FONT-SIZE: 16pt;  POSITION: absolute; }

  10. -->
  11. </STYLE>

  13. <SCRIPT language="javascript">
  14. var speed = 5
  15. var Count = 0
  16. var Fcount = 50
  17. var TimeID
  18. var IsFly = false
  19. var lay

  21. var StarFly = new Array()
  22. StarFly[1] = 0
  23. StarFly[2] = 50
  24. StarFly[3] = 0
  25. StarFly[4] = 50
  26. StarFly[5] = 0
  27. StarFly[6] = 50
  28. var EndFly = new Array()
  29. EndFly[1] = 10
  30. EndFly[2] = 30
  31. EndFly[3] = 20
  32. EndFly[4] = 40
  33. EndFly[5] = 30
  34. EndFly[6] = 50


  37. function Roundtext(){
  38.    
  39. for(var i = 1; i <=3; i++)
  40. {
  41. lay = document.all("fly"+i)
  42. lay.style.visibility = "visible"                                         
  43. StarFly[i*2-1] = Math.round(Math.random()*document.body.clientWidth - lay.style.posWidth)
  44.             StarFly[i*2] = Math.round(Math.random()*document.body.clientHeight- lay.style.posHeight)
  45. }

  47. Count++;
  48. if(IsFly==false)
  49. {
  50. IsFly = true;
  51. for(var i = 1; i <= 3; i++)
  52. {
  53.                        
  54. lay.style.posLeft = Math.round(StarFly[i*2-1] + (EndFly[i*2] - StarFly[i*2-1])/Fcount * Count)
  55.                                 lay.style.posTop = Math.round(StarFly[i*2] + (EndFly[i*2-1] - StarFly[i*2])/Fcount * Count)
  56. lay = document.all("fly"+i)
  57.                                                
  58. if(Count <= Fcount){IsFly = false}
  59. }
  60. TimerID = setTimeout("Roundtext()",speed)
  61. }
  62. else{clearTimeout(TimeID)}
  63. }
  64. </SCRIPT>

  66. </HEAD>
  67. <BODY onload="Roundtext()">
  68. <DIV class="Style1" id="fly1">亂數飛行集中定位的文字字串</DIV>
  69. <DIV class="Style2" id="fly2">亂數飛行集中定位的文字字串</DIV>
  70. <DIV class="Style3" id="fly3">亂數飛行集中定位的文字字串</DIV>
  71. </BODY></HTML>
複製代碼
心安，平安   
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!

TOP

        靜思自在 : 看別人不順眼，是自己修養不夠。
返回列表 上一主題