<!-- 網(wǎng)頁特效代碼由[中國WEB開發(fā)者網(wǎng)絡(luò):http://www.ChinaWebDev.com]提供! --> <!-- 要實(shí)現(xiàn)此效果需要 3 個(gè)步驟: --> <!-- 第 1 步: --> <!-- 把下面的代碼加到<HEAD></HEAD>區(qū)域中: --> <META content="text/html; charset=gb2312" http-equiv=Content-Type> <META content="MSHTML 5.00.2614.3500" name=GENERATOR> <META content=FrontPage.Editor.Document name=ProgId> <STYLE>.menutable { BACKGROUND-COLOR: #ffffff; BORDER-BOTTOM: #307ce8 1px solid; BORDER-LEFT: #307ce8 5px solid; BORDER-RIGHT: #307ce8 1px solid; BORDER-TOP: #94bcf3 1px solid; FONT-SIZE: 12px; POSITION: absolute; Z-INDEX: 100 } .menutrin { BACKGROUND-COLOR: #1a71e6; COLOR: #ffffff; CURSOR: hand } .menutrout { COLOR: #000000; CURSOR: hand } .menutd0 { HEIGHT: 25px; TEXT-ALIGN: center; WIDTH: 28px; 改變這個(gè)修改菜單高度--->: } .menutd1 { FONT-FAMILY: Webdings; TEXT-ALIGN: right; WIDTH: 46px } .linktd1 { WIDTH: 46px } .menutd2 { WIDTH: 4px } .menuhr { BORDER-BOTTOM: #307ce8 1px inset; BORDER-LEFT: #307ce8 1px inset; BORDER-RIGHT: #307ce8 1px inset; BORDER-TOP: #307ce8 1px inset } </STYLE> <BGSOUND id=theBS loop=0 src=""> <!-- 第 2 步: --> <!-- 把<BODY>中的屬性代碼改為: --> <BODY bgColor=#eaf5fd style="FONT-SIZE: 10pt"> <!-- 第 3 步: --> <!-- 把下面的代碼加到<BODY></BODY>區(qū)域中: --> <HTML><HEAD><TITLE>mouse-menu</TITLE> <META content="text/html; charset=gb2312" http-equiv=Content-Type> <META content="MSHTML 5.00.2614.3500" name=GENERATOR> <META content=FrontPage.Editor.Document name=ProgId> <STYLE>.menutable { BACKGROUND-COLOR: #ffffff; BORDER-BOTTOM: #307ce8 1px solid; BORDER-LEFT: #307ce8 5px solid; BORDER-RIGHT: #307ce8 1px solid; BORDER-TOP: #94bcf3 1px solid; FONT-SIZE: 12px; POSITION: absolute; Z-INDEX: 100 } .menutrin { BACKGROUND-COLOR: #1a71e6; COLOR: #ffffff; CURSOR: hand } .menutrout { COLOR: #000000; CURSOR: hand } .menutd0 { HEIGHT: 25px; TEXT-ALIGN: center; WIDTH: 28px; 改變這個(gè)修改菜單高度--->: } .menutd1 { FONT-FAMILY: Webdings; TEXT-ALIGN: right; WIDTH: 46px } .linktd1 { WIDTH: 46px } .menutd2 { WIDTH: 4px } .menuhr { BORDER-BOTTOM: #307ce8 1px inset; BORDER-LEFT: #307ce8 1px inset; BORDER-RIGHT: #307ce8 1px inset; BORDER-TOP: #307ce8 1px inset } </STYLE> <BGSOUND id=theBS loop=0 src=""></HEAD> <BODY bgColor=#eaf5fd style="FONT-SIZE: 10pt"> <SCRIPT><!---- var IconList = new Array(); // icon圖片 集合, 下標(biāo)從 1 開始 IconList[1] = new Image(); IconList[1].src = "../images/295/icon_host.gif"; IconList[2] = new Image(); IconList[2].src = "../images/295/icon_ip.gif"; IconList[3] = new Image(); IconList[3].src = "../images/295/icon_mailbody.gif"; IconList[4] = new Image(); IconList[4].src = "../images/295/icon_mailer.gif"; //---------------- 檢測變量 菜單的顯示隱藏就靠它了?。?! ------------------// var JustMenuID = ""; var SubMenuList = new Array(); var NowSubMenu = ""; var mouseCanSound = true; //--------------------------- 聲音開關(guān) ------ 聲音開關(guān) ------------------// var menuSpeed = 50; //---------- 菜單顯示速度 ------------// var alphaStep = 30; //---------- Alpaha 變化 度 -----------// //------------- 構(gòu)建 主菜單 對象 -------------// function MouseMenu(objName) { this.id = "Menu_"+objName; this.obj = objName; this.length = 0; this.addMenu = addMenu; this.addLink = addLink; this.addHR = addHR; JustMenuID = this.id; document.body.insertAdjacentHTML(‘beforeEnd‘,‘<table id="‘+this.id+‘" border="0" cellspacing="0" cellpadding="0" style="top: 0; left: 0; visibility: hidden; filter:Alpha(Opacity=0);" class="menutable" onmousedown=event.cancelBubble=true; onmouseup=event.cancelBubble=true></table>‘); } //----------- 構(gòu)建 子菜單 對象 -------------// function SubMenu(objName,objID) { this.obj = objName; this.id = objID; this.addMenu = addMenu; this.addLink = addLink; this.addHR = addHR; this.length = 0; } //-------------- 生成 菜單 makeMenu 方法 -----------// function makeMenu(subID,oldID,word,icon,url,target,thetitle) { var thelink = ‘‘; if(icon&&icon!="") { icon = ‘<img border="0" src="‘+IconList[icon].src+‘">‘; } else { icon = ‘‘; } if(!thetitle||thetitle=="") { thetitle = ‘‘; } if(url&&url!="") { thelink += ‘<a href="‘+url+‘" ‘; if(target&&target!="") { thelink += ‘ ‘; thelink += ‘target="‘+target+‘" ‘ } thelink += ‘></a>‘; } var Oobj = document.getElementById(oldID); /*--------------------------------------------- 菜單html樣式 <tr class="menutrout" id="trMenu_one_0" title="I am title"> <td class="menutd0"><img src="icon/sub.gif" border="0" width="16" height="16"></td> <td><a href="javascript:alert(‘I am menu‘);" target="_self"></a><nobr>菜單一</nobr></td> <td class="menutd1">4</td> <td class="menutd2"> </td> </tr> --------------------------------------------------*/ Oobj.insertRow(); with(Oobj.rows(Oobj.rows.length-1)) { id = "tr"+subID; className = "menutrout"; title = thetitle; } eventObj = "tr"+subID; eval(eventObj+‘.attachEvent("onmouseover",MtrOver(‘+eventObj+‘))‘); eval(eventObj+‘.attachEvent("onclick",MtrClick(‘+eventObj+‘))‘); var trObj = eval(eventObj); for(i=0;i<4;i++) { trObj.insertCell(); } with(Oobj.rows(Oobj.rows.length-1)) { cells(0).className = "menutd0"; cells(0).innerHTML = icon; cells(1).innerHTML = thelink+‘<nobr class=indentWord>‘+word+‘</nobr>‘; cells(1).calssName = "indentWord" cells(2).className = "menutd1"; cells(2).innerHTML = "4"; cells(3).className = "menutd2"; cells(3).innerText = " "; } document.body.insertAdjacentHTML(‘beforeEnd‘,‘<table id="‘+subID+‘" border="0" cellspacing="0" cellpadding="0" style="top: 0; left: 0; visibility: hidden; filter:Alpha(Opacity=0);" class="menutable" onmousedown=event.cancelBubble=true; onmouseup=event.cancelBubble=true></table>‘); } //---------------- 生成連接 makeLink 方法 ------------// function makeLink(subID,oldID,word,icon,url,target,thetitle) { var thelink = ‘‘; if(icon&&icon!="") { icon = ‘<img border="0" src="‘+IconList[icon].src+‘">‘; } else { icon = ‘‘; } if(!thetitle||thetitle=="") { thetitle = ‘‘; } if(url&&url!="") { thelink += ‘<a href="‘+url+‘" ‘; if(target&&target!="") { thelink += ‘ ‘; thelink += ‘target="‘+target+‘" ‘ } thelink += ‘></a>‘; } var Oobj = document.getElementById(oldID); /*--------------------------------------------- 連接html樣式 <tr class="menutrout" id="trMenu_one_0" title="I am title"> <td class="menutd0"><img src="icon/sub.gif" border="0" width="16" height="16"></td> <td><a href="javascript:alert(‘I am link‘);" target="_self"></a><nobr>連接一</nobr></td> <td class="linktd1"></td> <td class="menutd2"> </td> </tr> --------------------------------------------------*/ Oobj.insertRow(); with(Oobj.rows(Oobj.rows.length-1)) { id = "tr"+subID; className = "menutrout"; title = thetitle; } eventObj = "tr"+subID; eval(eventObj+‘.attachEvent("onmouseover",LtrOver(‘+eventObj+‘))‘); eval(eventObj+‘.attachEvent("onmouseout",LtrOut(‘+eventObj+‘))‘); eval(eventObj+‘.attachEvent("onclick",MtrClick(‘+eventObj+‘))‘); var trObj = eval(eventObj); for(i=0;i<4;i++) { trObj.insertCell(); } with(Oobj.rows(Oobj.rows.length-1)) { cells(0).className = "menutd0"; cells(0).innerHTML = icon; cells(1).innerHTML = thelink+‘<nobr class=indentWord>‘+word+‘</nobr>‘; cells(2).className = "linktd1"; cells(2).innerText = " "; cells(3).className = "menutd2"; cells(3).innerText = " "; } } //-------------- 菜單對象 addMenu 方法 ------------// function addMenu(word,icon,url,target,title) { var subID = this.id + "_" + this.length; var subObj = this.obj+"["+this.length+"]"; var oldID = this.id; eval(subObj+"= new SubMenu(‘"+subObj+"‘,‘"+subID+"‘)"); makeMenu(subID,oldID,word,icon,url,target,title); this.length++; } //------------- 菜單對象 addLink 方法 -------------// function addLink(word,icon,url,target,title) { var subID = this.id + "_" + this.length; var oldID = this.id; makeLink(subID,oldID,word,icon,url,target,title); this.length++; } //------------ 菜單對象 addHR 方法 -----------------// function addHR() { var oldID = this.id; var Oobj = document.getElementById(oldID); Oobj.insertRow(); /*------------------------------------------ <tr> <td colspan="4"> <hr class="menuhr" size="1" width="95%"> </td> </tr> --------------------------------------------*/ Oobj.rows(Oobj.rows.length-1).insertCell(); with(Oobj.rows(Oobj.rows.length-1)) { cells(0).colSpan= 4; cells(0).insertAdjacentHTML(‘beforeEnd‘,‘<hr class="menuhr" size="1" width="95%">‘); } } //--------- MtrOver(obj)-------------------// function MtrOver(obj) { return sub_over; function sub_over() { var sonid = obj.id.substring(2,obj.id.length); var topobj = obj.parentElement.parentElement; NowSubMenu = topobj.id; if(obj.className=="menutrout") { mouseWave(); } HideMenu(1); SubMenuList[returnIndex(NowSubMenu)] = NowSubMenu; ShowTheMenu(sonid,MPreturn(sonid)) SubMenuList[returnIndex(obj.id)] = sonid; if(topobj.oldTR) { eval(topobj.oldTR+‘.className = "menutrout"‘); } obj.className = "menutrin"; topobj.oldTR = obj.id; } } //--------- LtrOver(obj)-------------------// function LtrOver(obj) { return sub_over; function sub_over() { var topobj = obj.parentElement.parentElement; NowSubMenu = topobj.id; HideMenu(1); SubMenuList[returnIndex(NowSubMenu)] = NowSubMenu; if(topobj.oldTR) { eval(topobj.oldTR+‘.className = "menutrout"‘); } obj.className = "menutrin"; topobj.oldTR = obj.id; } } //--------- LtrOut(obj)-------------------// function LtrOut(obj) { return sub_out; function sub_out() { var topobj = obj.parentElement.parentElement; obj.className = "menutrout"; topobj.oldTR = false; } } //----------MtrClick(obj)-----------------// function MtrClick(obj) { return sub_click; function sub_click() { if(obj.cells(1).all.tags("A").length>0) { obj.cells(1).all.tags("A")(0).click(); } } } //---------- returnIndex(str)--------------// function returnIndex(str) { return (str.split("_").length-3) } //---------ShowTheMenu(obj,num)-----------------// function ShowTheMenu(obj,num) { var topobj = eval(obj.substring(0,obj.length-2)); var trobj = eval("tr"+obj); var obj = eval(obj); if(num==0) { with(obj.style) { pixelLeft = topobj.style.pixelLeft +topobj.offsetWidth; pixelTop = topobj.style.pixelTop + trobj.offsetTop; } } if(num==1) { with(obj.style) { pixelLeft = topobj.style.pixelLeft + topobj.offsetWidth; pixelTop = topobj.style.pixelTop + trobj.offsetTop + trobj.offsetHeight - obj.offsetHeight; } } if(num==2) { with(obj.style) { pixelLeft = topobj.style.pixelLeft - obj.offsetWidth; pixelTop = topobj.style.pixelTop + trobj.offsetTop; } } if(num==3) { with(obj.style) { pixelLeft = topobj.style.pixelLeft - obj.offsetWidth; pixelTop = topobj.style.pixelTop + trobj.offsetTop + trobj.offsetHeight - obj.offsetHeight; } } obj.style.visibility = "visible"; if(obj.alphaing) { clearInterval(obj.alphaing); } obj.alphaing = setInterval("menu_alpha_up("+obj.id+","+alphaStep+")",menuSpeed); } //----------HideMenu(num)-------------------// /*---------------------- var SubMenuList = new Array(); var NowSubMenu = ""; ---------------------*/ function HideMenu(num) { var thenowMenu = ""; var obj = null; if(num==1) { thenowMenu = NowSubMenu } for(i=SubMenuList.length-1;i>=0;i--) { if(SubMenuList[i]&&SubMenuList[i]!=thenowMenu) { obj = eval(SubMenuList[i]); if(obj.alphaing) { clearInterval(obj.alphaing); } obj.alphaing = setInterval("menu_alpha_down("+obj.id+","+alphaStep+")",menuSpeed); obj.style.visibility = "hidden"; eval("tr"+SubMenuList[i]).className = "menutrout"; SubMenuList[i] = null; } else { if(SubMenuList[i]==thenowMenu) { return; } } } NowSubMenu = ""; } //-----------MainMenuPosition return()------------// function MMPreturn() { var obj = eval(JustMenuID); var x = event.clientX; var y = event.clientY; var judgerX = x + obj.offsetWidth; var judgerY = y + obj.offsetHeight; var px = 0; var py = 0; if(judgerX>document.body.clientWidth) { px = 2; } if(judgerY>document.body.clientHeight) { py = 1; } return (px+py); } //-----------MenuPosition return(obj)--------------// function MPreturn(obj) { var topobj = eval(obj.substring(0,obj.length-2)); var trobj = eval("tr"+obj); var x = topobj.style.pixelLeft + topobj.offsetWidth; var y = topobj.style.pixelTop + trobj.offsetTop; obj = eval(obj); var judgerY = obj.offsetHeight + y; var judgerX = obj.offsetWidth + x; var py = 0; var px = 0; if(judgerY>=document.body.clientHeight) { py = 1; } if(judgerX>= document.body.clientWidth) { px = 2; } return (px+py); } //-----------mouseWave()-------------// function mouseWave() { if(mouseCanSound) { theBS.src= "sound/sound.wav"; } } //----------- menu_alpha_down -------// function menu_alpha_down(obj,num) { var obj = eval(obj); if(obj.filters.Alpha.Opacity > 0 ) { obj.filters.Alpha.Opacity += -num; } else { clearInterval(obj.alphaing); obj.filters.Alpha.Opacity = 0; obj.alphaing = false; obj.style.visibility = "hidden"; } } //------------ menu_alpha_up --------// function menu_alpha_up(obj,num) { var obj = eval(obj); if(obj.filters.Alpha.Opacity<100) obj.filters.Alpha.Opacity += num; else { clearInterval(obj.alphaing); obj.filters.Alpha.Opacity = 100; obj.alphaing = false; } } //----------- IE ContextMenu -----------------// function document.oncontextmenu() { return false; } //----------- IE Mouseup ----------------// function document.onmouseup() { if(event.button==2) { HideMenu(0); var obj = eval(JustMenuID) obj.style.visibility = "hidden"; if(obj.alphaing) { clearInterval(obj.alphaing); } obj.filters.Alpha.Opacity = 0; var judger = MMPreturn() if(judger==0) { with(obj.style) { pixelLeft = event.clientX + document.body.scrollLeft; pixelTop = event.clientY + document.body.scrollTop; } } if(judger==1) { with(obj.style) { pixelLeft = event.clientX + document.body.scrollLeft; pixelTop = event.clientY - obj.offsetHeight + document.body.scrollTop; } } if(judger==2) { with(obj.style) { pixelLeft = event.clientX - obj.offsetWidth + document.body.scrollLeft; pixelTop = event.clientY + document.body.scrollTop; } } if(judger==3) { with(obj.style) { pixelLeft = event.clientX - obj.offsetWidth + document.body.scrollLeft; pixelTop = event.clientY - obj.offsetHeight + document.body.scrollTop; } } mouseWave(); obj.style.visibility = "visible"; obj.alphaing = setInterval("menu_alpha_up("+obj.id+","+alphaStep+")",menuSpeed); } } //---------- IE MouseDown --------------// function document.onmousedown() { if(event.button==1) { HideMenu(); var obj = eval(JustMenuID) if(obj.alphaing) { clearInterval(obj.alphaing); } obj.alphaing = setInterval("menu_alpha_down("+obj.id+","+alphaStep+")",menuSpeed); } } //-----> </SCRIPT> <SCRIPT> var one = new MouseMenu("one"); one.addMenu("菜單一",1,"javascript:alert(‘I am menu‘);","_self","I am title"); one[0].addLink("連接一",2,"javascript:alert(‘I am link‘)") one[0].addHR() one[0].addLink("連接二","","javascript:alert(‘I am link‘)") one[0].addMenu("菜單三"); one[0][one[0].length-1].addLink("連接一",1,"javascript:;") one[0].addLink("連接三","","javascript:alert(‘I am link‘)") one[0].addLink("連接四","","javascript:alert(‘I am link‘)") one.addLink("連接二","","javascript:alert(‘I am link‘)") one.addMenu("菜單二",3); one[2].addLink("連接一","","javascript:alert(‘I am link‘)") one.addHR(); one.addLink("連接三,多長都可以",4,"javascript:alert(‘I am link‘)") </SCRIPT> <P><FONT color=#1a71e6>有聲音的哦…… 可以關(guān)閉!設(shè)置 mouseCanSound = false; 就可以了</FONT></P></BODY></HTML> |