0


歡迎光臨!! 救國團台中學苑 社會教育研習中心 電腦班隊研習營【網頁設計課程】


目錄選單語法




滑動式連結目錄

 

 

將原始碼複製到<HEAD></HEAD>標籤之間

<!--語法在網頁插入的開始-->
<style>
#divMenu {font-family:arial,helvetica; font-size:12pt; font-weight:bold}
#divMenu a{text-decoration:none;}
#divMenu a:hover{color:red;}
</style>
<script language="JavaScript1.2">
/********************************************************************************
Submitted with modifications by Jack Routledge (http://fastway.to/compute) to DynamicDrive.com
Copyright (C) 1999 Thomas Brattli @ www.bratta.com
This script is made by and copyrighted to Thomas Brattli
This may be used freely as long as this msg is intact!
This script has been featured on http://www.dynamicdrive.com
********************************************************************************Browsercheck:*/
ie=document.all?1:0
n=document.layers?1:0
<!--選單在展開前所顯示出來的寬度//-->
lshow=60
<!--選單每次移動多少像素//-->
var move=10;
<!--選單每隔多久移動一次﹐數值越大﹐間隔的時間也越長﹐從而使選單的移動產生一點一點移動的效果//-->
menuSpeed=40
<!--設定選單是否與網頁的內容一起移動﹐其中可選的值有true保持浮動狀態﹐False與網頁的內容一起滾動。//-->
var moveOnScroll=true

/********************************************************************************
You should't have to change anything below this.
********************************************************************************/
//Defining variables
var tim;
var ltop;

//Object constructor
function makeMenu(obj,nest){
nest=(!nest) ? '':'document.'+nest+'.'
this.css=(n) ? eval(nest+'document.'+obj):eval(obj+'.style')
this.state=1
this.go=0
this.width=n?this.css.document.width:eval(obj+'.offsetWidth')
this.left=b_getleft
this.obj = obj + "Object"; eval(this.obj + "=this")
}
//Get's the top position.
function b_getleft(){
var gleft=(n) ? eval(this.css.left):eval(this.css.pixelLeft);
return gleft;
}
/********************************************************************************
Deciding what way to move the menu (this is called onmouseover, onmouseout or onclick)
********************************************************************************/
function moveMenu(){
if(!oMenu.state){
clearTimeout(tim)
mIn()
}else{
clearTimeout(tim)
mOut()
}
}
//Menu in
function mIn(){
if(oMenu.left()>-oMenu.width+lshow){
oMenu.go=1
oMenu.css.left=oMenu.left()-move
tim=setTimeout("mIn()",menuSpeed)
}else{
oMenu.go=0
oMenu.state=1
}
}
//Menu out
function mOut(){
if(oMenu.left()<0){
oMenu.go=1
oMenu.css.left=oMenu.left()+move
tim=setTimeout("mOut()",menuSpeed)
}else{
oMenu.go=0
oMenu.state=0
}
}
/********************************************************************************
Checking if the page is scrolled, if it is move the menu after
********************************************************************************/
function checkScrolled(){
if(!oMenu.go) oMenu.css.top=eval(scrolled)+ltop
if(n) setTimeout('checkScrolled()',30)
}
/********************************************************************************
Inits the page, makes the menu object, moves it to the right place, show it
********************************************************************************/
function menuInit(){
oMenu=new makeMenu('divMenu')
scrolled=n?"window.pageYOffset":"document.body.scrollTop"
oMenu.css.left=-oMenu.width+lshow
ltop=(n)?oMenu.css.top:oMenu.css.pixelTop;
oMenu.css.visibility='visible'
if(moveOnScroll) ie?window.onscroll=checkScrolled:checkScrolled();
}

//Initing menu on pageload
onload=menuInit;
</script>
<!--語法在網頁插入的結束-->
 

將原始碼複製到網頁中欲呈現特效的位置

<!--語法在網頁插入的開始-->
<!--↓透過修改此處可以改變選單圖標出現的位置及選單主體的背景色彩//-->
<div id="divMenu" style="position:absolute; top:90; left:20; width:200; visibility:hidden; background-color:#64D0FE">
<nobr>
<!--↓透過修改此處可以改變選單的中的文字內容及其連結網址//-->
<a href="http://">JavaScript</a> -
<a href="http://">Java applet</a> -
<a href="http://">ASP程式下載</a> -
<!--↓透過修改此處可以改變選單圖標的文字內容及其背景色彩//-->
<a href="javascript://" onclick="moveMenu()" style="background-color:#FFCC00;text-decoration:none">MENU</a>
</nobr></div>
</script>
<!--語法在網頁插入的結束-->
 


上一頁下一頁 │                                      │ 回首頁 回特效語法  │