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

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


 

浮動鏈結選單

在開始參閱這個範例之前,請先將你的滑鼠指標移至本範例網頁右方的垂直捲動軸上移動一下位置,有沒有看到一個黃色表格隨著頁面移動呢?好像常在某家提供免費空間的公司網頁看到吧,不過這個表格可是超鏈結的選單喔!  

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

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

步驟三:然後再將 網頁中的<BODY></BODY>標記中間之間的網頁敘述( 含綠色粉紅色敘述)標記起來,按滑鼠右鍵選擇【複製】〈游標一樣不能離開標示起來的反白區〉將控制碼先複製起來。

步驟四:在網頁中的<BODY></BODY>標記中間按滑鼠右鍵選擇【貼上】將剛剛複製的東東貼上!

步驟五:綠色區域的程式碼是建立選單的主要敘述,一定要擺在粉紅色的Java敘述之前,因為我們要先取得選單顯現與隱藏時的ID(身分號碼)來供給程式作為判斷處理。

步驟六:把本例程式碼標示為橘色的選單項目及其連結更換為你自己的選單項目與連結。

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

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


<SCRIPT Language="JavaScript">
<!--
// Valor工作室小誌 [valor Studio]

var changespeed = 20
//設定浮動表格位置更新速度
var Xpos =100 
//浮定表格水平位置設定
var Ypos =300 
//浮定表格垂直位置設定

//初始值設定
function setinit() 
{
posX = (document.body.clientWidth-Xpos)
posY = (document.body.clientHeight-Ypos)
}

//捲動軸移動時更新浮動表格位置
function Renew() 
{
document.all.mymenu.style.left = posX + (document.body.scrollLeft);
document.all.mymenu.style.top = posY + (document.body.scrollTop);
}

//特效主程式區
function gomove() 
{
setinit()
window.onresize=setinit
markID = setInterval ("Renew()",changespeed)
}


//--->
</SCRIPT>

</HEAD>

<BODY>

<!--浮動鏈結表格的網頁敘述-->
<span><div id="mymenu" style="position:absolute">
<table border="1" cellspacing="0" cellpadding="2" bgcolor="#FFFF00">
<tr><td><a href="
http://www.twbts.com/">麻辣學園</a></td></tr>
<tr><td><a href="
http://gb.twbts.com">麻辣家族討論版版</a></td></tr>
</table></div></span>

<!--呼叫Java浮動表格特效的敘述-->
<script language="JavaScript">
<!--
window.onload=gomove
//-->
</script>




</BODY>
</HTML>

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

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