回首頁 與我們連絡 網站地圖 加入我的最愛



 





何謂亂數飛行?亂數飛行就是我們不在CSS樣式表中直接指定文字字串的位置,因為如果在CSS樣式表中設定則文字字串的位置將是固定的!但是,我們可以使用JavaScript程式來動態的指定文字字串的位置,請你將滑鼠移至下方的紅色文字上按一下滑鼠左鍵,看看會發生什麼情況,如何?這就是所謂的亂數飛行文字字串:

<按偶飛給你看>

 

亂數飛行集中定位   
亂數飛行集中定位   
亂數飛行集中定位   

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

標準的網頁內容開頭:
<html>
<HEAD>
<title>CSS與JavaScript範例4</title>

加入CSS樣式宣告內容:別忘了加上註解符號。
<STYLE>
<!--

定義三組用來作為漸成文字堆疊層次的網頁文字樣式:在主文中(包括在<BODY>與</BODY>標籤之中的網頁內容)凡是遇到網頁標籤為<DIV>,並且在<DIV>標籤中加註樣式類別時,就將其被包括在<DIV>與</DIV>網頁標籤中的字串文字格式定為我們所宣告的網頁文字樣式:


.Style1{COLOR: #0000ff; FONT-SIZE: 16pt; POSITION: absolute;}
.Style2{COLOR: #00ff00; FONT-SIZE: 16pt; POSITION: absolute;}
.Style3{COLOR: #ff0000; FONT-SIZE: 16pt; POSITION: absolute;}

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

結束CSS樣式宣告內容:別忘了加上註解符號。
-->
</STYLE>

加入JavaScript程式語言所撰寫的程式敘述:

<SCRIPT language="javascript">
<!--
//Valor 工作室-麻辣學園 http://www.twbts.com
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>

</HEAD>

開始主文(<BODY>標籤)並在網頁標籤<DIV>中直接加入我們所宣告的CSS屬性類別(class)設定CLASS="XXXX",同時,我們必須將<BODY>標籤內容加上onload="Roundtext()"成為<BODY onload="Roundtext()">,為何要修正成為這樣的內容?因為這樣當網頁被載入時就會引發JavaScript程式的Roundtext區段的程式敘述而開始產生有三個層次亂數飛行而後集中定位的文字字串特效。

在網頁標籤<div>中直接加入我們所宣告的CSS屬性類別(class)設定後,必須給被包括在<DIV>與</DIV>網頁標籤中的字串文字一個特有的辨別名稱(id)。請特別注意:id 的名稱內容必須是連續的編號名稱,同時主名稱必須配合JavaScript 程式來命名!(id="主名稱+連續數字編號")
<BODY onload="Roundtext()">
<DIV
class="Style1" id="fly1">亂數飛行集中定位的文字字串</DIV>
<DIV
class="Style2" id="fly2">亂數飛行集中定位的文字字串</DIV>
<DIV
class="Style3" id="fly3">亂數飛行集中定位的文字字串</DIV>

注意:<DIV>與</DIV>網頁標籤中必須加入各層次的文字字串,此處的文字字串並非由 JavaScript 程式來動態產生!JavaScript 程式只有動態地來設定各層次文字字串的位置(Position)。

結束主文(</BODY>)與網頁主體(</html>)標籤。
</BODY>
</html>

[實例展示]   [原始網頁內容]

 

CSS 教學文件
CSS入門講座
基礎網頁應用
進階網頁應用
結合JavaScript應用
 

本網頁內容由昱得資訊工作室楊宗誌(小誌 )製作(C) Copyright Valor-Studio since in 1993
非經正式書面同意,不得將全部或部分內容,以任何方式轉載於其他網站或用於任何商業行為