學習參考書JavaScript精緻範例辭典

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


 

飛行定位文字

當你進入本網頁時,相信你已經看到兩組由上而下及由下而上的〔飛行定位文字〕了,沒錯!本範例就是要示範與告訴你如何做出這種效果!

步驟一:用滑鼠將底下<SCRIPT Language="JavaScript"></SCRIPT>這兩個標記內的程式碼(含標記本身藍色的喔),標記起來,按滑鼠右鍵選擇【複製】〈游標不能離開標示起來的反白區喔〉將以下的控制碼先複製起來。

步驟二:然後在網頁中的 </HEAD> 之前按滑鼠右鍵選擇【貼上】將剛剛複製的東東貼上!(其實只要把程式碼貼在<HEAD></HEAD>標記中間任何一個地方都可以啦!)

步驟三:<BODY></BODY>標記中間你要放置飛行文字的地方加上下列網頁敘述!

<SPAN id=down style="POSITION: relative; VISIBILITY: hidden">麻辣家族討論版版</SPAN>
<SPAN
id=top style="POSITION: relative; VISIBILITY: hidden">麻辣學園</SPAN>

橘色的文字是你要展現飛行文字特效的文字內容,直接更改為你要顯示的文字即可,id=down 代表文字要由網頁下方移入,id=top 代表文字要由網頁上方移入。

注意:本範例只適用於IE瀏覽器。

 
<HTML>
<HEAD>
<TITLE></TITLE>


<SCRIPT language=JavaScript>
<!--
var step=3 
//飛行文字的移動間格
var speed=50 
//飛行文字的移動速率
var position=200 
//飛行文字的起始位置

//建立飛行文字組特效的副程式
function Start() 

Movetext_init("top")
Movetext_init("down")
}


//初始副程式
function Movetext_init(id) 
{
lay = document.all(id);
if(id=="top") {lay.style.pixelTop = position*-1} 
//如果id為top的文字組設定起始位置為網頁上方
if(id=="down") {lay.style.pixelTop = position}  
//如果id為down的文字組設定起始位置為網頁下方
lay.style.visibility = "visible"
Movetext(id)
}


//文字組移動的副程式,這是特效的主要關鍵
function Movetext(id) 
{
flag = false 
lay = document.all(id)
//由上而下的特效
if(id=="top") 
{
lay.style.posTop += step
if(!(lay.style.pixelTop>=0)){flag = true}
}
//由下而上的特效
if(id=="down") 
{
lay.style.posTop -= step
if(!(lay.style.pixelTop<=0)){flag = true}
}
if(flag) tID = setTimeout("Movetext('"+id+"')",speed);
}


window.onload = Start

//-->
</SCRIPT>

</HEAD>

<BODY>

 <!--飛行文字特效的兩組文字敘述-->
<SPAN
id=down style="POSITION: relative; VISIBILITY: hidden">麻辣家族討論版版</SPAN>
<SPAN
id=top style="POSITION: relative; VISIBILITY: hidden">麻辣學園</SPAN>


</BODY>
</HTML>

JavaScript 文件
鏈結圖片切換
簡易月曆
隨機背景底圖
蹦出式廣告視窗
觸控式背景色轉換
游標跑馬燈
鏈結說明跑馬燈
文字鏈結提示說明
四處移動的圖片
圖片式進站時間
簡易線上占卜
文字拉把遊戲
圖片拉把遊戲
定時更換圖片(1)
定時更換圖片(2)
項目導覽說明
上下震動與捲動頁面
飛行定位文字
旋轉飛行文字
幻化隱現文字
漫天飛舞
落葉片片
浮動鏈結選單
側拉式鏈結選單
友站連結/快速選單
 

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