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

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


 

側拉式鏈結選單

麻辣學園TWBTS
麻辣家族討論版版

在開始參閱這個範例之前,請先將你的滑鼠指標移至網頁左方的〔側拉式鏈結選單〕的圖片上,是不是會向右拉出一個選單呢?它的好處就是當你有很多鏈結時可以做一個整體的配置,以免你的網頁看起來非常凌亂!而且很炫對吧!  

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

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

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

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

步驟五:利用圖形編輯器製作一張選單拉把的圖(本例使用scriptk1.gif),用來作為選單拉把,記得將圖片檔名更換過來。

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

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

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

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


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

var movespeed=15
//移動速度
var menucolor="#FFC8FF"
// 選單顏色
var movex=5
// 移動間隔

//宣告選單移動狀態及計時器名稱
var menumoveNO,menumoveYES,movetimeID

//設定選單水平移動的位置座標
function setMoveXpos(mymenu,x) 
{mymenu.style.posLeft=x}

//取得選單目前的水平位置座標
function getMoveXpos(mymenu)
{return mymenu.style.posLeft}

//設定選單顏色的函數
function setmenushowcolor(mymenu,color) 
{mymenu.style.backgroundColor=color}

// 取得目前選單顯示狀態的函數

function getmenuNowPos(mymenu) 
{return mymenu.style.posWidth}

// 隱藏選單的函數
function menuHide()
{
menumoveNO-=movex,menumoveYES-=movex
if (-menumoveYES<=getmenuNowPos(menuShowYes)) 
{
setMoveXpos(menuShowNo,menumoveNO),setMoveXpos(menuShowYes,menumoveYES)
clearTimeout(movetimeID)
movetimeID=setTimeout("menuHide()",movespeed)
}
else 
{
menumoveNO=0,menumoveYES=-getmenuNowPos(menuShowYes)
setMoveXpos(menuShowNo,menumoveNO),setMoveXpos(menuShowYes,menumoveYES)
clearTimeout(movetimeID)
}
}


// 顯示選單的函數
function menuShow() 
{
menumoveNO=getMoveXpos(menuShowNo),menumoveYES=getMoveXpos(menuShowYes)
menumoveYES+=movex,menumoveNO+=movex
if (menumoveYES<0) 
{
setMoveXpos(menuShowNo,menumoveNO),setMoveXpos(menuShowYes,menumoveYES)
clearTimeout(movetimeID)
movetimeID=setTimeout("menuShow()",movespeed)
}
else 
{
setMoveXpos(menuShowNo,menumoveNO),setMoveXpos(menuShowYes,menumoveYES)
clearTimeout(movetimeID)
}
}

//--->
</SCRIPT>

</HEAD>

<BODY>

 <!--設定選單位未出現時,所要顯現的拉把圖片大小及位置-->
<SPAN id=layNo style="clip: rect(0px 20px 150px 0px); height: 150; left: 0; position: absolute; width: 20">
<IMG src="
scriptk1.gif" width=20 height=150> </SPAN> 

<!--設定選單出現時,所要顯現的大小及位置-->
<SPAN id=layYes style="CLIP: rect(0px 150px 150px 0px); HEIGHT: 150px; LEFT: -150px; POSITION: absolute; WIDTH: 150px"> 

<!--設定選單內的成員項目-->
<CENTER> 
<A href="
http://www.twbts.com/" target=_blank>麻辣學園TWBTS</A><BR> 
<A href="
http://gb.twbts.com" target=_blank>麻辣家族討論版版</A><BR> 
</CENTER></SPAN> 

<!--//利用滑鼠移進拉把圖片(MOUSEOVER事件)與滑鼠移出拉把圖片(MOUSEOUT)的事件來呼叫主JAVAScript程式的顯現選單menuShow()與隱藏選單menuHide()的函數-->
<SCRIPT language=JavaScript> 
<!-- 
var menuShowNo,menuShowYes 
if (document.all){ menuShowNo=document.all("layNo"),menuShowYes=document.all("layYes") } 
menuShowNo.onmouseout=menuHide,menuShowYes.onmouseout=menuHide 
menuShowNo.onmouseover=menuShow,menuShowYes.onmouseover=menuShow 
setmenushowcolor(menuShowYes,menucolor) 
//---> 
</SCRIPT>



</BODY>
</HTML>

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

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