(教學第38篇) 堆疊與元件位置
這一節是本教學最後一個單元，小誌將不在詳細的理論解說了！因為所有的物件、元件…等等的理論之前都談過了，現在是驗收的時刻了，小誌直接將之前所談的迴圈（for）、判斷敘述（if）、陣列物件(Array)、元件堆疊、元件位置控制等等，直接應用在本節的綜合演練範例中。如果你一路將本教學閱讀至此，相信你已具備相當的JavaScript設計能力，所謂：「師父領進門、修行在個人」，小誌能給你的只是一塊塊單獨的積木，要如何將這些積木拼成堡壘，就得靠各位讀者自己囉，小誌誠心的希望大家在閱讀本書之後能設計出屬於自己的JavaScript，而不要到網路上直接將別人的成果拷貝到自己的網站中使用，或者是買本集JavaScript程式大全的書回來抄抄寫寫。呵∼小誌廢話太多了，不要見怪ㄚ！
[color=Magenta][size=4][b]綜合演練：亂數飛行集中定位的文字[/b][/size][/color]
何謂亂數飛行？亂數飛行就是我們不在CSS樣式表中直接指定文字字串的位置，因為如果在CSS樣式表中設定則文字字串的位置將是固定的！但是，我們可以使用JavaScript程式來動態的指定文字字串的位置。
[attach]784[/attach]
[attach]785[/attach] [list]
[*]這個效果必須先在CSS樣式表中先決定三個層次的文字字串的基本樣式，但是我們並不設定文字字串的位置，我們把文字字串的位置保留到JavaScript程式中動態設定，由JavaScript程式動態設定各層次文字字串的位置，同時利用JavaScript程式來控制各個層次文字的出現與否！
定義三組用來作為漸成文字堆疊層次的網頁文字樣式：在主文中(包括在<BODY>與</BODY>標籤之中的網頁內容)凡是遇到網頁標籤為<DIV>，並且在<DIV>標籤中加註樣式類別時，就將其被包括在<DIV>與</DIV>網頁標籤中的字串文字格式定為我們所宣告的網頁文字樣式：[code].Style1{COLOR: #0000ff; FONT-SIZE: 16pt; POSITION: absolute;}
.Style2{COLOR: #00ff00; FONT-SIZE: 16pt; POSITION: absolute;}
.Style3{COLOR: #ff0000; FONT-SIZE: 16pt; POSITION: absolute;}[/code]加註樣式類別為Style1的CSS樣式性質宣告將使網頁標籤的文字字串擁有藍色、字體大小為１６pt的外觀樣式。
加註樣式類別為Style２的CSS樣式性質宣告將使網頁標籤的文字字串擁有綠色、字體大小為１６pt的外觀樣式。
加註樣式類別為Style3的CSS樣式性質宣告將使網頁標籤的文字字串擁有紅色、字體大小為１６pt的外觀樣式。
[*]程式內容[code]SCRIPT language="javascript">
var speed = 5 //亂數變換位置的速度
var Count = 0
var Fcount = 50 //亂數變換位置的次數
var TimeID
var IsFly = false //判斷是否進行飛行動作的旗標變數
var lay
//以下為亂數飛行字串初始的位置定位設定
var StarFly = new Array()
StarFly[1] = 0
StarFly[2] = 50
StarFly[3] = 0
StarFly[4] = 50
StarFly[5] = 0
StarFly[6] = 50
//以下為亂數飛行字串最後的位置定位設定
var EndFly = new Array()
EndFly[1] = 10 //第一層次亂數飛行字串最後的水平軸(Left)位置定位設定
EndFly[2] = 30 //第一層次亂數飛行字串最後的垂直(Topt)位置定位設定
EndFly[3] = 20 //第二層次亂數飛行字串最後的水平軸(Left)位置定位設定
EndFly[4] = 40 //第二層次亂數飛行字串最後的垂直軸(Top)位置定位設定
EndFly[5] = 30 //第三層次亂數飛行字串最後的水平軸(Left)位置定位設定
EndFly[6] = 50 //第三層次亂數飛行字串最後的垂直軸(Top)位置定位設定
function Roundtext(){
for(var i = 1; i <=3; i++)
{
lay = document.all("fly"+i)
//"fly"為網頁中 <DIV>標籤內所指定的主id名稱
lay.style.visibility = "visible"
StarFly[i*2-1] = Math.round(Math.random()*document.body.clientWidth - lay.style.posWidth)
StarFly[i*2] = Math.round(Math.random()*document.body.clientHeight- lay.style.posHeight)
}
Count++;
if(IsFly==false)
{
IsFly = true;
for(var i = 1; i <= 3; i++)
{
//動態亂數設定文字字串的水平位置(Left)
lay.style.posLeft = Math.round(StarFly[i*2-1] + (EndFly[i*2] - StarFly[i*2-1])/Fcount * Count)
//動態亂數設定文字字串的垂直位置(Top)
lay.style.posTop = Math.round(StarFly[i*2] + (EndFly[i*2-1] - StarFly[i*2])/Fcount * Count)
lay = document.all("fly"+i)
if(Count <= Fcount){IsFly = false}
}
TimerID = setTimeout("Roundtext()",speed)
}
else{clearTimeout(TimeID)}
}
</SCRIPT>[/code][/list] [list]
[*]開始主文(<BODY>標籤)並在網頁標籤<DIV>中直接加入我們所宣告的CSS屬性類別(class)設定CLASS="XXXX"，同時，我們必須將<BODY>標籤內容加上onload="Roundtext()"成為<BODY onload="Roundtext()">，當網頁被載入時就呼叫Roundtext()函式開始產生有三個層次亂數飛行而後集中定位的文字字串特效。
[*]在網頁標籤<div>中直接加入我們所宣告的CSS屬性類別(class)設定後，必須給被包括在<DIV>與</DIV>網頁標籤中的字串文字一個特有的辨別名稱(id)。請特別注意：id 的名稱內容必須是連續的編號名稱，同時主名稱必須配合JavaScript 程式來命名[color=Red]！(id="主名稱＋連續數字編號")[/color][code]<BODY onload="Roundtext()">
<DIV class="Style1" id="fly1">亂數飛行集中定位的文字字串</DIV>
<DIV class="Style2" id="fly2">亂數飛行集中定位的文字字串</DIV>
<DIV class="Style3" id="fly3">亂數飛行集中定位的文字字串</DIV>[/code][color=Red]注意！！
在<DIV>與</DIV>網頁標籤中必須加入各層次的文字字串，此處的文字字串並非由程式來動態產生！程式只有動態地來設定各層次文字字串的位置(Position)。[/color]
[*]加入結束網頁主文(</BODY>)與網頁主體(</html>)標籤，大公告成！
[/list][code]<HTML>
<HEAD>
<TITLE>綜合演練</TITLE>
<STYLE>
<!--
.Style1 {COLOR: #0000ff; FONT-SIZE: 16pt; POSITION: absolute; }
.Style2{COLOR: #00ff00; FONT-SIZE: 16pt; POSITION: absolute;}
.Style3 {COLOR: #ff0000; FONT-SIZE: 16pt; POSITION: absolute; }
-->
</STYLE>
<SCRIPT language="javascript">
var speed = 5
var Count = 0
var Fcount = 50
var TimeID
var IsFly = false
var lay
var StarFly = new Array()
StarFly[1] = 0
StarFly[2] = 50
StarFly[3] = 0
StarFly[4] = 50
StarFly[5] = 0
StarFly[6] = 50
var EndFly = new Array()
EndFly[1] = 10
EndFly[2] = 30
EndFly[3] = 20
EndFly[4] = 40
EndFly[5] = 30
EndFly[6] = 50
function Roundtext(){
for(var i = 1; i <=3; i++)
{
lay = document.all("fly"+i)
lay.style.visibility = "visible"
StarFly[i*2-1] = Math.round(Math.random()*document.body.clientWidth - lay.style.posWidth)
StarFly[i*2] = Math.round(Math.random()*document.body.clientHeight- lay.style.posHeight)
}
Count++;
if(IsFly==false)
{
IsFly = true;
for(var i = 1; i <= 3; i++)
{
lay.style.posLeft = Math.round(StarFly[i*2-1] + (EndFly[i*2] - StarFly[i*2-1])/Fcount * Count)
lay.style.posTop = Math.round(StarFly[i*2] + (EndFly[i*2-1] - StarFly[i*2])/Fcount * Count)
lay = document.all("fly"+i)
if(Count <= Fcount){IsFly = false}
}
TimerID = setTimeout("Roundtext()",speed)
}
else{clearTimeout(TimeID)}
}
</SCRIPT>
</HEAD>
<BODY onload="Roundtext()">
<DIV class="Style1" id="fly1">亂數飛行集中定位的文字字串</DIV>
<DIV class="Style2" id="fly2">亂數飛行集中定位的文字字串</DIV>
<DIV class="Style3" id="fly3">亂數飛行集中定位的文字字串</DIV>
</BODY></HTML>
[/code]
頁:
[1]