電腦輔助語言教學

Computer Assisted Language Learning and Teaching

Instructor: Chi-Fen Emily Chen  陳其芬

Department of English

National Kaohsiung First University of Science and Technology, Taiwan


Course Introduction

課程簡介

Course Schedule

課程進度

Course Contents

課程內容

Online Dictionaries

線上字典

Web Resources

網路資源

Student Blogs

學生網誌

Student Projects

學生作品

Discussion Forum

線上討論區

 

JavaScript (3): 水平階層式選單

Mouse-Over - An Expanding Menu with Layers

    一、功用:
 

當滑鼠指到某個按鈕時,會再出現一水平拉出選單。

二、程式範例:
       

 

 

 

    三、程式碼及插入位置:
      1、將下列程式碼插入</head><body>間:

<script language="JavaScript">
<!-- DIV Function START -->
var isNS = (navigator.appName.indexOf("Netscape")>=0) ? 1:0;
var isIE = (document.all) ? 1:0;
var isIE5 = (isIE&&navigator.appVersion.indexOf("5.")>=0) ? 1:0;
function hideLayer(layer) {
if (isNS) layer.visibility = "hide";
if (isIE) layer.style.visibility = "hidden";}


function showLayer(layer) {
if (isNS) layer.visibility = "show";
if (isIE) layer.style.visibility = "visible";}


function moveLayerTo(layer,x,y) {
if (isNS) layer.moveTo(x,y);
if (isIE) {
layer.style.left=x;
layer.style.top=y;}}


function getWidth(layer) {
if (isNS) {
if (layer.document.width) return layer.document.width;
else return layer.clip.right-layer.clip.left;}
if (isIE) {
if (layer.style.pixelWidth) return layer.style.pixelWidth;
else return layer.clientWidth;}
return -1;}


function getHeight(layer) {
if (isNS) {
if (layer.document.height) return layer.document.height;
else return layer.clip.bottom-layer.clip.top;}
if (isIE) {
if (layer.style.pixelHeight) return layer.style.pixelHeight;
else return layer.clientHeight;}
return -1;}


function getzIndex(layer) {
if (isNS) return layer.zIndex;
if (isIE) return layer.style.zIndex;
return-1;}


function setzIndex(layer,z) {
if (isNS) layer.zIndex=z;
if (isIE) layer.style.zIndex=z;}


function clipLayer(layer,clipleft,cliptop,clipright,clipbottom) {
if (isNS) {
layer.clip.left=clipleft;
layer.clip.top=cliptop;
layer.clip.right=clipright;
layer.clip.bottom=clipbottom;}
if (isIE) layer.style.clip='rect('+cliptop+' '+clipright+' '+clipbottom+' '+clipleft+')';}


function getClipLeft(layer) {
if (isNS) return layer.clip.left;
if (isIE) {

var str = layer.style.clip;
if (!str) return 0;
var clip = getIEClipValues(layer.style.clip);
return(clip[3]);}
return -1;}


function getClipTop(layer) {
if (isNS) return layer.clip.top;
if(isIE) {
var str = layer.style.clip;
if (!str) return 0;
var clip = getIEClipValues(layer.style.clip);
return clip[0];}
return -1;}


function getClipRight(layer) {
if (isNS) return layer.clip.right;
if (isIE) {
var str = layer.style.clip;
if (!str) return layer.style.pixelWidth;
var clip = getIEClipValues(layer.style.clip);
return clip[1];}
return -1;}


function getClipBottom(layer) {
if (isNS) return layer.clip.bottom;
if (isIE) {
var str = layer.style.clip;
if (!str) return layer.style.pixelHeight;
var clip = getIEClipValues(layer.style.clip);
return clip[2];}
return -1;}


function getIEClipValues(str) {
var clip = new Array();
var i;
i = str.indexOf("(");
clip[0] = parseInt(str.substring(i+1,str.length),10);
i = str.indexOf(" ",i+1);
clip[1] = parseInt(str.substring(i+1,str.length),10);
i = str.indexOf(" ",i+1);
clip[2] = parseInt(str.substring(i+1,str.length),10);
i = str.indexOf(" ",i+1);
clip[3] = parseInt(str.substring(i+1,str.length),10);
return clip;}


function setBgColor(layer,color) {
if (isNS) layer.bgColor=color;
if (isIE) layer.style.backgroundColor=color;}


function getLayer(name) {
if (isNS) return findLayer(name,document);
if (isIE) return eval('document.all.'+name);
return null;}


function findLayer(name,doc) {
var i,layer;
for (i=0;i<doc.layers.length;i++) {
layer = doc.layers[i];
if (layer.name==name) return layer;
if (layer.document.layers.length > 0)
if ((layer = findLayer(name,layer.document))!=null)
return layer;}
return null;}


function getWindowWidth() {
if (isNS) return window.innerWidth;
if (isIE) return document.body.clientWidth;
return -1;}


function getWindowHeight() {
if (isNS) return window.innerHeight;
if (isIE) return document.body.clientHeight;
return -1;}


function getPageWidth() {
if (isNS) return document.width;
if (isIE) return document.body.scrollWidth;
return -1;}


function getPageHeight() {
if (isNS) return document.height;
if (isIE) return document.body.scrollHeight;
return -1;}


function getPageScrollX() {
if (isNS) return window.pageXOffset;
if (isIE) return document.body.scrollLeft;
return -1;}


function getPageScrollY() {
if (isNS) return window.pageYOffset;
if (isIE) return document.body.scrollTop;
return -1;}
<!-- DIV Function END -->

<!-- 選單初始化 -->
var popUpMenuScrollbarSize = 16;
var popUpMenus = new Array();

// 選單選項物件宣告
function PopUpMenuItem(text,link) {
this.text = text;
this.link = link;
this.isSeparator = false;
this.subMenu = null;}

function PopUpMenu(width){
this.width = width;
this.height = 0;
this.items = new Array();
this.created = false;
this.border = 2;
this.padding = 4;
this.spSize = 2;
this.spPadding = 1;
this.fgColor = "#000000";
this.bgColor = "#F7F29D";
this.hiFgColor = "#ffffff";
this.hiBgColor = "#000080";
this.bdHiColor = "#e0e0e0";
this.bdShColor = "#000000";
this.spHiColor = "#e0e0e0";
this.spShColor = "#808080";
this.fontFamily = "新細明體";
this.fontStyle = "plain";
this.fontWeight = "normal";
this.fontSize = "8pt";
this.noneImage = "document.gif";
this.normImage = "closed.gif";
this.highImage = "open.gif";
this.imageWidth = 8;
this.imageHeight = 12;
this.left = 0;
this.top = 0;
this.right = this.width;
this.bottom = this.height;
this.parentMenu = null;
this.openChild = null;
this.offsetX = 0;
this.offsetY = 0;
this.isStatic = false;
this.isOpen = false;
this.isSubmenu = false;
this.addItem = popUpMenuAddItem;
this.addSeparator = popUpMenuAddSeparator;
this.addSubmenu = popUpMenuAddSubmenu;
this.copyAttributes = popUpMenuCopyAttributes;
this.create = popUpMenuCreate;
this.open = popUpMenuOpen;
this.close = popUpMenuClose;
this.setStatic = popUpMenuSetStatic;
this.moveTo = popUpMenuMoveTo;
this.moveBy = popUpMenuMoveBy;
this.getzIndex = popUpMenuGetzIndex;
this.setzIndex = popUpMenuSetzIndex;
this.index = popUpMenus.length;
popUpMenus[this.index] = this;}

function popUpMenuAddItem(item){
if (!this.created) this.items[this.items.length] = item;}

function popUpMenuAddSeparator(){
if (!this.created) {
this.addItem(new PopUpMenuItem("",""));
this.items[this.items.length-1].isSeparator = true;}}

function popUpMenuAddSubmenu(item,menu){
if (!this.created&&!menu.isSubmenu) {
item.subMenu = menu;
this.items[this.items.length] = item;
menu.parentMenu = this;
menu.isSubmenu = true;}}

function popUpMenuCopyAttributes(menu){
if (!this.created&&menu!=null) {
this.border = menu.border;
this.padding = menu.padding;
this.spSize = menu.spSize;
this.spPadding = menu.spPadding;
this.fgColor = menu.fgColor;
this.bgColor = menu.bgColor;
this.hiFgColor = menu.hiFgColor;
this.hiBgColor = menu.hiBgColor;
this.bdHiColor = menu.bdHiColor;
this.bdShColor = menu.bdShColor;
this.spHiColor = menu.spHiColor;
this.spShColor = menu.spShColor;
this.fontFamily = menu.fontFamily;
this.fontStyle = menu.fontStyle;
this.fontWeight = menu.fontWeight;
this.fontSize = menu.fontSize;
this.noneImage = menu.noneImage;
this.normImage = menu.normImage;
this.highImage = menu.highImage;
this.imageWidth = menu.imageWidth;
this.imageHeight = menu.imageHeight;}}

function popUpMenuCreate(){
var hasSubmenus;
var norm,high,end1,end2,img1,img2,sep;
var text;
var noimg,imgsrc;
var width,height;
var str;var x,y;
var i;
var bevelLayers;
if (!isNS&&!isIE) return;
if (this.created) return;
hasSubmenus = false;
for (i=0;i<this.items.length;i++) if (this.items[i].subMenu!=null) hasSubmenus = true;
norm = '<table border=0 cellpadding='+this.padding+' cellspacing=0 width="100%">

<tr valign=top><td>

<span style="color:'+this.fgColor+';font-family:'+this.fontFamily+';font-size:'+this.fontSize+';

font-style:'+this.fontStyle+';font-weight:'+this.fontWeight+';">';
high = '<table border=0 cellpadding='+this.padding+' cellspacing=0 width="100%">

<tr valign=top><td><span style="color:'+this.hiFgColor+';font-family:'+this.fontFamily+';

font-size:'+this.fontSize+';font-style:'+this.fontStyle+';font-weight:'+this.fontWeight+';">';
end1 = '</span></td>';
end2 = '</tr></table>';
img1 = '';
img2 = '';
noimg = '';
if (hasSubmenus){
img1 = '<td align=right><img border=0 hspace=0 vspace=0 src="';
img2 = '" width='+this.imageWidth+' height='+this.imageHeight+'></td>';
noimg = this.noneImage;}
sep = '<table border=0 cellpadding='+this.spPadding+' cellspacing=0 width="100%">

<tr><td align=center><table border=0 cellpadding=0 cellspacing=0 width="100%">

<tr bgcolor="'+this.spShColor+'"><td>

<img border=0 hspace=0 vspace=0 src="'+this.noneImage+'" width=1

height='+(this.spSize-Math.round(this.spSize/2))+'></td></tr>';
if (this.spSize-Math.round(this.spSize/2)>0)
sep += '<tr bgcolor="'+this.spHiColor+'"><td>

<img border=0 hspace=0 vspace=0 src="'+this.noneImage+'" width=1

height='+Math.round(this.spSize/2)+'></td></tr>';
sep += '</table></td></tr></table>';
str = "";
if (isNS){
this.baseLayer = new Layer(this.width);
setBgColor(this.baseLayer,this.bdShColor);}
bevelLayers = new Array();
if (isNS){
for (i=0;i<this.border;i++){
bevelLayers[bevelLayers.length] = new Layer(this.width,this.baseLayer);
bevelLayers[bevelLayers.length-1].visibility = "inherit";
bevelLayers[bevelLayers.length] = new Layer(this.width,this.baseLayer);
bevelLayers[bevelLayers.length-1].visibility = "inherit";}}
if (isIE)
for (i=0;i<this.border;i++)
str += '<div id="popUpMenu'+this.index+'_bevel'+(2*i)+'"

style="position:absolute; width:'+this.width+'px; height:100%;">

</div>\n<div id="popUpMenu'+this.index+'_bevel'+(2*i+1)+'"

style="position:absolute; width:'+this.width+'px; height:100%;"></div>\n';
width = this.width-2*this.border;
for (i=0;i<this.items.length;i++){
if (this.items[i].subMenu==null) imgsrc = noimg;
else imgsrc = this.normImage;
if (this.items[i].isSeparator) text = sep;
else text = norm+this.items[i].text+end1+img1+imgsrc+img2+end2;
if (isNS){
this.items[i].normLayer = new Layer(width,this.baseLayer);
this.items[i].normLayer.document.open();
this.items[i].normLayer.document.write(text);
this.items[i].normLayer.document.close();
this.items[i].normLayer.visibility = "inherit";
setBgColor(this.items[i].normLayer,this.bgColor);}
if (isIE)
str += '<div id="popUpMenu'+this.index+'_norm'+i+'" style="position:absolute;

background-color:'+this.bgColor+'; width:'+width+'px;">'+text+'</div>\n';
if (this.items[i].subMenu==null) imgsrc = noimg;
else imgsrc = this.highImage;
if (this.items[i].isSeparator) text = sep;
else text = high+this.items[i].text+end1+img1+imgsrc+img2+end2;
if (isNS){
this.items[i].highLayer = new Layer(width,this.baseLayer);
this.items[i].highLayer.document.open();
this.items[i].normLayer.document.write(text);
this.items[i].highLayer.document.close();
this.items[i].highLayer.visibility = "hide";
setBgColor(this.items[i].highLayer,this.hiBgColor);}
if (isIE)
str += '<div id="popUpMenu'+this.index+'_high'+i+'"

style="position:absolute; background-color:'+this.hiBgColor+';

width:'+width+'px; visibility:hidden;">'+text+'</div>\n';
if (isNS){
this.items[i].dmmyLayer = new Layer(width,this.baseLayer);
this.items[i].dmmyLayer.visibility = "inherit";}
if (isIE)
str += '<div id="popUpMenu'+this.index+'_dmmy'+i+'" style="position:absolute; width:'+width+'px;"></div>\n';}
if (isIE&&!isIE5){
x = getPageScrollX();
y = getPageScrollY();
window.scrollTo(getPageWidth(),getPageHeight());}
if (isIE){
str = '<div id="popUpMenu'+this.index+'_base" style="position:absolute;

left:0px; top:0px; width:'+this.width+'px; overflow:hidden; visibility:hidden;">'+str+'</div>\n';
document.body.insertAdjacentHTML("beforeEnd",str);
if (!isIE5) window.scrollTo(x,y);
this.baseLayer = getLayer("popUpMenu"+this.index+"_base");
for (i=0;i<2*this.border;i++){
bevelLayers[bevelLayers.length] = getLayer("popUpMenu"+this.index+"_bevel"+(2*i));
bevelLayers[bevelLayers.length] = getLayer("popUpMenu"+this.index+"_bevel"+(2*i+1));}}
x = this.border;
y = this.border;
height = 0;
for (i=0;i<this.items.length;i++){
if (this.items[i].subMenu){
this.items[i].subMenu.parentItem = this.items[i];
this.items[i].subMenu.offsetX = this.width-(this.border+this.padding);
this.items[i].subMenu.offsetY = y;}
if (isIE){
this.items[i].normLayer = getLayer("popUpMenu"+this.index+"_norm"+i);
this.items[i].highLayer = getLayer("popUpMenu"+this.index+"_high"+i);
this.items[i].dmmyLayer = getLayer("popUpMenu"+this.index+"_dmmy"+i);}
moveLayerTo(this.items[i].normLayer,x,y);
moveLayerTo(this.items[i].highLayer,x,y);
moveLayerTo(this.items[i].dmmyLayer,x,y);
height = getHeight(this.items[i].normLayer);
y += height;
clipLayer(this.items[i].normLayer,0,0,width,height);
clipLayer(this.items[i].highLayer,0,0,width,height);
if (isIE){
this.items[i].dmmyLayer.style.pixelWidth = width;
this.items[i].dmmyLayer.style.pixelHeight = height;}
clipLayer(this.items[i].dmmyLayer,0,0,width,height);
if (!this.items[i].isSeparator){
this.items[i].dmmyLayer.index = this.index;
this.items[i].dmmyLayer.itemIndex = i;
this.items[i].dmmyLayer.onmouseover = popUpMenuItemOn;
this.items[i].dmmyLayer.onmouseout = popUpMenuItemOff;
if (isNS){
this.items[i].dmmyLayer.document.index = this.index;
this.items[i].dmmyLayer.document.itemIndex = i;
this.items[i].dmmyLayer.document.captureEvents(Event.MOUSEUP);
this.items[i].dmmyLayer.document.onmouseup = popUpMenuItemClick;}
if (isIE)
this.items[i].dmmyLayer.onclick = popUpMenuItemClick;}}
this.height = y+this.border;
if (isIE) this.baseLayer.style.height = this.height;
setBgColor(this.baseLayer,this.bdShColor);
clipLayer(this.baseLayer,0,0,this.width,this.height);
this.baseLayer.index = this.index;this.baseLayer.onmouseout=popUpMenuOff;
for (i=0;i<this.border;i++){
clipLayer(bevelLayers[2*i],i,i,this.width-i,this.height-i);
setBgColor(bevelLayers[2*i],this.bdHiColor);
clipLayer(bevelLayers[2*i+1],(i+1),(i+1),this.width,this.height);
setBgColor(bevelLayers[2*i+1],this.bdShColor);
if (isIE){
bevelLayers[i].index = this.index;bevelLayers[i].onmouseout=popUpMenuOff;}}
this.created = true;
for (i=0;i<this.items.length;i++)
if (this.items[i].subMenu&&!this.items[i].subMenu.created)
this.items[i].subMenu.create();
window.status = "PopUpMenu: Done.";
if (this.parentMenu==null)
setTimeout('window.status = window.defaultStatus',500);}

function popUpMenuOpen(x,y){
var maxX,maxY;
if (this.created){
maxX = getPageScrollX()+getWindowWidth()-this.width;
maxY = getPageScrollY()+getWindowHeight()-this.height;
if (isNS&&getWindowHeight()<getPageHeight()) maxX -= popUpMenuScrollbarSize;
if (isNS&&getWindowWidth()<getPageWidth()) maxY -= popUpMenuScrollbarSize;
if ((x==null||y==null)){
if (this.isStatic&&!this.isSubmenu){
x = this.left;
y = this.top;
} else {
x = mouseX-(this.border+this.padding);
y = mouseY-(this.border+this.padding);}}
if (this.isSubmenu){
x = this.parentMenu.left+this.offsetX;
y = this.parentMenu.top+this.offsetY;
if (x>maxX) maxX = this.parentMenu.left+this.parentMenu.border-this.width;
this.parentMenu.openChild = this;}
if (this.isSubmenu||!this.isStatic){
x = Math.max(0,Math.min(maxX,x));
y = Math.max(0,Math.min(maxY,y));}
moveLayerTo(this.baseLayer,x,y);
showLayer(this.baseLayer);
this.isOpen = true;
this.left = x;
this.top = y;
this.right = x+this.width;
this.bottom = y+this.height;}}

function popUpMenuClose(){
if (this.created){
if (this.openChild!=null){
this.openChild.close();
this.openChild = null;}
hideLayer(this.baseLayer);
this.isOpen = false;
if (this.isSubmenu){
hideLayer(this.parentItem.highLayer);
this.parentMenu.openChild = null;}}}

function popUpMenuSetStatic(flag){
if (!this.isSubmenu) this.isStatic = flag;}

function popUpMenuMoveTo(x,y){
if (this.created) moveLayerTo(this.baseLayer,x,y);
this.left = x;
this.top = y;
this.right = this.left+this.width;
this.bottom = this.top+this.height;}

function popUpMenuMoveBy(dx,dy){
if (this.created) moveLayerBy(this.baseLayer,dx,dy);
this.left += dx;
this.top += dy;
this.right += dx;
this.bottom += dy;}

function popUpMenuGetzIndex(){
if (this.created) return(getzIndex(this.baseLayer));
else return(0);}

function popUpMenuSetzIndex(z){
var i;
if (this.created){
setzIndex(this.baseLayer,z);
for (i=0;i<this.items.length;i++)
if (this.items[i].subMenu!=null)
this.items[i].subMenu.setzIndex(z);}}

function popUpMenuOff(e){
var menu;
var wasClosed;
menu = popUpMenus[this.index];
if (isIE){
mouseX = window.event.clientX+document.body.scrollLeft;
mouseY = window.event.clientY+document.body.scrollTop;
if (mouseX>menu.left&&mouseX<menu.right&&mouseY>menu.top&&mouseY<menu.bottom)
return true;}
wasClosed = false;
if (menu.openChild==null){
if (!menu.isStatic){
menu.close();
wasClosed = true;}
} else {
if (mouseX<menu.openChild.left||mouseX>menu.openChild.right||mouseY

<menu.openChild.top||mouseY>menu.openChild.bottom){
if (!menu.isStatic){
menu.close();
wasClosed = true;
} else {
menu.openChild.close();}}}
while (wasClosed&&menu.isSubmenu&&!menu.parentMenu.isStatic){
wasClosed = false;
if (mouseX<menu.parentMenu.left||mouseX>menu.parentMenu.right||mouseY

<menu.parentMenu.top||mouseY>menu.parentMenu.bottom){
menu.parentMenu.close();
wasClosed = true;
menu = menu.parentMenu;}}
return true;}
function popUpMenuItemOn(e){
var menu,item;
menu = popUpMenus[this.index];
item = menu.items[this.itemIndex];
if (menu.openChild) menu.openChild.close();
showLayer(item.highLayer);
if (item.subMenu) item.subMenu.open(null,null);}
function popUpMenuItemOff(e){
var menu,item;
menu = popUpMenus[this.index];
item = menu.items[this.itemIndex];
if (item.subMenu!=null&&item.subMenu.isOpen) return;
hideLayer(item.highLayer);}
function popUpMenuItemClick(e){
var menu,item;
menu = popUpMenus[this.index];
item = menu.items[this.itemIndex];
if (item.link=="") return true;
hideLayer(item.highLayer);
while (menu.isSubmenu) menu = menu.parentMenu;
if (!menu.isStatic) menu.close();
else if (menu.openChild!=null) menu.openChild.close();
if (item.link.indexOf("javascript:")==0) eval(item.link);
else window.location.href = item.link;
return true;}


function popUpMenuGetMousePosition(e){
if (isNS){
mouseX = e.pageX;
mouseY = e.pageY;}
if (isIE){
mouseX = window.event.clientX+document.body.scrollLeft;
mouseY = window.event.clientY+document.body.scrollTop;}}


function popUpMenuReload(){
if (isNS&&origWidth==window.innerWidth&&origHeight==window.innerHeight) return;
if(isIE) setTimeout('window.location.href = window.location.href',2000);
else window.location.href=window.location.href;}
var mouseX = 0;
var mouseY = 0;
if (isNS) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = popUpMenuGetMousePosition;
var origWidth;
var origHeight;
if (isNS){
origWidth = window.innerWidth;
origHeight = window.innerHeight;}


window.onresize = popUpMenuReload;

// 建立選單物件模型
var menu = new PopUpMenu(120);
 

// 宣告第一子選單項目
var part1 = new PopUpMenu(120);
part1.copyAttributes(menu);
part1.addItem(new PopUpMenuItem("
小恐龍的世界", "http://skr.hypermart.net/"));
part1.addSeparator();
part1.addItem(new PopUpMenuItem("
小恐龍工作坊", "http://www.skrnet.com/"));
part1.addSeparator();
part1.addItem(new PopUpMenuItem("
小恐龍留言板", "http://www.skrnet.com/skrgb/"));
 

// 宣告次目錄項目
var
sub1 = new PopUpMenu(120);
sub1.copyAttributes(menu);
sub1.addItem(new PopUpMenuItem("環境說明", "http://www.skrnet.com/skrjs/index01.htm"));
sub1.addSeparator();
sub1.addItem(new PopUpMenuItem("新的訊息", "http://www.skrnet.com/skrjs/index.htm"));
sub1.addSeparator();
sub1.addItem(new PopUpMenuItem("問題討論", "http://www.skrnet.com/skrtalk/"));
sub1.addSeparator();
sub1.addItem(new PopUpMenuItem("示範展示", "http://www.skrnet.com/skrjs/index02.htm"));
 

// 宣告第二子目錄項目
var
part2 = new PopUpMenu(120);
part2.copyAttributes(menu);
part2.addSubmenu(new PopUpMenuItem("JavaScript 示範", "#"),sub1);
part2.addSeparator();
part2.addItem(new PopUpMenuItem("選項一", "#"));
part2.addSeparator();
part2.addItem(new PopUpMenuItem("選項二", "#"));
part2.addSeparator();
part2.addItem(new PopUpMenuItem("選項三", "#"));
 

// 建立主目錄項目
menu.addSubmenu(new PopUpMenuItem("
小恐龍網站群", "#"), part1);
menu.addSeparator();
menu.addSubmenu(new PopUpMenuItem("
本站資源", "#"), part2);
menu.addSeparator();
menu.addItem(new PopUpMenuItem("
Google 搜尋", "http://www.google.com/"));

//選單X、Y位置
var minX =
450;
var minY =
300;

function initMenu() {
menu.create();
menu.setStatic(true);
menu.open(minX, minY);
repositionMenu();}


function repositionMenu() {
var viewTop, viewBottom;
var dy;
viewTop = getPageScrollY();
viewBottom = viewTop + getWindowHeight();
if (menu.bottom < viewTop) menu.moveTo(minX, viewTop - menu.height);
if (menu.top > viewBottom) menu.moveTo(minX, viewBottom);
dy = Math.round(Math.abs(viewTop + minY - menu.top) / 2);
if (viewTop + minY < menu.top) dy = -dy;
menu.moveBy(0, dy);
setTimeout("repositionMenu()", 20);}


window.onload = initMenu;
</script>

 

註:用「」此色標起來的數值及字能應自己所需做改變。

  程式碼參考自→「小恐龍的世界」http://skr.hypermart.net/