XP风格的右键菜单代码如下： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>网页特效--XP风格的右键菜单</title> <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; 改变这个修改菜单高度--->: } .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><!---- /*----------------------------------------------------------- 鼠标右键菜单 1.0 Designed By Stroll e-mail: csy-163@163.com --------------------------------------------------------------*/ //--------------- 有关数据 -----------------// var IconList = new Array(); // icon图片 集合， 下标从 1 开始 IconList[1] = new Image(); IconList[1].src = "sto/1.gif"; IconList[2] = new Image(); IconList[2].src = "sto/2.gif"; IconList[3] = new Image(); IconList[3].src = "sto/3.gif"; IconList[4] = new Image(); IconList[4].src = "sto/4.gif"; //---------------- 检测变量 菜单的显示隐藏就靠它了！！！ ------------------// var JustMenuID = ""; var SubMenuList = new Array(); var NowSubMenu = ""; var mouseCanSound = true; //--------------------------- 声音开关 ------ 声音开关 ------------------// var menuSpeed = 50; //---------- 菜单显示速度 ------------// var alphaStep = 30; //---------- Alpaha 变化 度 -----------// //------------- 构建 主菜单 对象 -------------// 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>'); } //----------- 构建 子菜单 对象 -------------// 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:open('http://www.7stk.com')") one[0].addHR() one[0].addLink("连接二","","javascript:open('http://www.7stk.com')") one[0].addMenu("菜单三"); one[0][one[0].length-1].addLink("连接一",1,"javascript:;") one[0].addLink("连接三","","javascript:open('http://www.7stk.com')") one[0].addLink("连接四","","javascript:open('http://www.7stk.com')") one.addLink("连接二","","javascript:open('http://www.7stk.com')") one.addMenu("菜单二",3); one[2].addLink("连接一","","javascript:open('http://www.7stk.com')") one.addHR(); one.addLink("连接三，多长都可以",4,"javascript:open('http://www.7stk.com')") </SCRIPT> <P><FONT color=#1a71e6>有声音的哦…… 可以关闭！设置 mouseCanSound = false; 就可以了</FONT></P></BODY></HTML> 点击右键，看一看效果！有声音的哦…… 可以关闭！设置 mouseCanSound = false; 就可以了
关于本站 | 广告合作 | 网址导航 | 友情链接 | 免责声明 | 联系我们 | 站长本人 | 本站申明
Copyright © www.7stk.com all right蜀ICP备06013829号 冰峰工作室
冰峰工作室