返回列表 上一主題 發帖

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

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

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

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

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

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

14-8.png
2010-5-20 15:58


14-9.png
2010-5-20 15:58
心安,平安   為了論壇的永續經營,您不妨 贊 助 論 壇
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!


  • 這個效果必須先在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樣式性質宣告將使網頁標籤的文字字串擁有藍色、字體大小為16pt的外觀樣式。

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

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

  • 程式內容
    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

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

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

    24. function Roundtext(){

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

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

    44. if(Count <= Fcount){IsFly = false}
    45. }
    46. TimerID = setTimeout("Roundtext()",speed)
    47. }
    48. else{clearTimeout(TimeID)}
    49. }
    50. </SCRIPT>
    複製代碼
心安,平安   為了論壇的永續經營,您不妨 贊 助 論 壇
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!

TOP


  • 開始主文(<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; }

  9. -->
  10. </STYLE>

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

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


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

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

  59. </HEAD>
  60. <BODY onload="Roundtext()">
  61. <DIV class="Style1" id="fly1">亂數飛行集中定位的文字字串</DIV>
  62. <DIV class="Style2" id="fly2">亂數飛行集中定位的文字字串</DIV>
  63. <DIV class="Style3" id="fly3">亂數飛行集中定位的文字字串</DIV>
  64. </BODY></HTML>
複製代碼
心安,平安   為了論壇的永續經營,您不妨 贊 助 論 壇
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!

TOP

        靜思自在 : 要比誰更受誰.不要比誰更怕誰。
返回列表 上一主題