JS实现不使用图片仿Windows右键菜单效果代码

本文实例讲述了JS实现不使用图片仿Windows右键菜单效果代码。分享给大家供大家参考，具体如下：
这里演示JS不使用图片仿Windows右键菜单效果，这款代码灵活使用了文鼎字，配合CSS和JS做出了这个和系统右键菜单很相似的东东。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-windows-right-button-menu-codes/
具体代码如下：
<HTML><HEAD><TITLE>极酷的多级右键菜单</TITLE><META content="text/html; charset=gb2312" http-equiv=Content-Type><STYLE type=text/css>BODY {FONT-SIZE: 12px;}.info{FONT-SIZE: 14px;color:#FFFFFF;font-family:@Tahoma,@宋体;width:20px}TABLE {CURSOR: default; FONT-SIZE: 12px; MARGIN: 0px}TR {HEIGHT: 20px}TR.over {BACKGROUND-COLOR: #000080; COLOR: #ffffff; CURSOR: default; FONT-SIZE: 12px}TR.out {BACKGROUND-COLOR: #efefef; COLOR: #000000; FONT-SIZE: 12px}DIV.rm_div {BACKGROUND-COLOR: #efefef; BORDER-BOTTOM: #ffffff 1px outset; BORDER-LEFT: #ffffff 1px outset; BORDER-RIGHT: #ffffff 1px outset; BORDER-TOP: #ffffff 1px outset; DISPLAY: none; FILTER: Alpha（Opacity="95"）; HEIGHT: 0px; PADDING-BOTTOM: 1px; PADDING-LEFT: 1px; PADDING-RIGHT: 1px; PADDING-TOP: 1px; POSITION: absolute; WIDTH: 0px}HR.sperator {BORDER-BOTTOM: #ffffff 1px inset; BORDER-LEFT: #ffffff 1px inset; BORDER-RIGHT: #ffffff 1px inset; BORDER-TOP: #ffffff 1px inset; WIDTH: 95%}.w2kfont {FONT-FAMILY: Tahoma; FONT-SIZE: 8pt}</STYLE><SCRIPT language=JScript><！-- function RightMenu（） { this.AddExtendMenu=AddExtendMenu; this.AddItem=AddItem; this.GetMenu=GetMenu; this.HideAll=HideAll; this.I_OnMouseOver=I_OnMouseOver; this.I_OnMouseOut=I_OnMouseOut; this.I_OnMouseUp=I_OnMouseUp; this.P_OnMouseOver=P_OnMouseOver; this.P_OnMouseOut=P_OnMouseOut; A_rbpm = new Array（）; HTMLstr = ""; HTMLstr += "<！-- RightButton PopMenu -->
"; HTMLstr += "
"; HTMLstr += "<！-- PopMenu Starts -->
"; HTMLstr += "<div id="E_rbpm" class="rm_div">
"; HTMLstr += "<table width="100%" border="0" cellspacing="0">
"; HTMLstr += "<tr><td height="264" width="20" valign="bottom" bgcolor="#000000" onclick=window.event.cancelBubble=true; class=info>娃海作制"; HTMLstr += "</td><td height="264" width="120" style="padding: 1" valign="bottom">
"; HTMLstr += "<table width="100%" border="0" cellspacing="0">
"; HTMLstr += "<！-- Insert A Extend Menu or Item On Here For E_rbpm -->
"; HTMLstr += "</table></td></tr></table>
"; HTMLstr += "</div>
"; HTMLstr += "<！-- Insert A Extend_Menu Area on Here For E_rbpm -->"; HTMLstr += "
"; HTMLstr += "<！-- PopMenu Ends -->
"; } function AddExtendMenu（id,img,wh,name,parent） { var TempStr = ""; eval（"A_"+parent+".length++"）; eval（"A_"+parent+"[A_"+parent+".length-1] = id"）;TempStr += "<div id="E_"+id+"" class="rm_div">
"; TempStr += "<table width="100%" border="0" cellspacing="0">
"; TempStr += "<！-- Insert A Extend Menu or Item On Here For E_"+id+" -->"; TempStr += "</table>
"; TempStr += "</div>
"; TempStr += "<！-- Insert A Extend_Menu Area on Here For E_"+id+" -->"; TempStr += "<！-- Insert A Extend_Menu Area on Here For E_"+parent+" -->"; HTMLstr = HTMLstr.replace（"<！-- Insert A Extend_Menu Area on Here For E_"+parent+" -->",TempStr）; eval（"A_"+id+" = new Array（）"）; TempStr = ""; TempStr += "<！-- Extend Item : P_"+id+" -->
"; TempStr += "<tr id="P_"+id+"" class="out""; TempStr += " onmouseover="P_OnMouseOver（""+id+"",""+parent+""）""; TempStr += " onmouseout="P_OnMouseOut（""+id+"",""+parent+""）""; TempStr += " onmouseup=window.event.cancelBubble=true;"; TempStr += " onclick=window.event.cancelBubble=true;"; TempStr += "><td nowrap>"; TempStr += "<font face="Wingdings" style="font-size:18px">0</font> "+name+" </td><td style="font-family: webdings; text-align: ;">4"; TempStr += "</td></tr>
"; TempStr += "<！-- Insert A Extend Menu or Item On Here For E_"+parent+" -->"; HTMLstr = HTMLstr.replace（"<！-- Insert A Extend Menu or Item On Here For E_"+parent+" -->",TempStr）; } function AddItem（id,img,wh,name,parent,location） { var TempStr = ""; var ItemStr = "<！-- ITEM : I_"+id+" -->"; if（id == "sperator"） {TempStr += ItemStr+"
";TempStr += "<tr class="out" onclick="window.event.cancelBubble=true;" onmouseup="window.event.cancelBubble=true;"><td colspan="2" height="1"><hr class="sperator"></td></tr>";TempStr += "<！-- Insert A Extend Menu or Item On Here For E_"+parent+" -->";HTMLstr = HTMLstr.replace（"<！-- Insert A Extend Menu or Item On Here For E_"+parent+" -->",TempStr）;return; } if（HTMLstr.indexOf（ItemStr） ！= -1） {alert（"I_"+id+"already exist！"）;return; } TempStr += ItemStr+"
"; TempStr += "<tr id="I_"+id+"" class="out""; TempStr += " onmouseover="I_OnMouseOver（""+id+"",""+parent+""）""; TempStr += " onmouseout="I_OnMouseOut（""+id+""）""; TempStr += " onclick="window.event.cancelBubble=true;""; if（location == null）TempStr += " onmouseup="I_OnMouseUp（""+id+"",""+parent+"",null）""; elseTempStr += " onmouseup="I_OnMouseUp（""+id+"",""+parent+"",""+location+""）""; TempStr += "><td nowrap>"; TempStr +="<font face="Wingdings" style="font-size:18px">"+wh+"</font> "+ name+" ";// TempStr += "</td><td></td></tr>
"; TempStr += "<！-- Insert A Extend Menu or Item On Here For E_"+parent+" -->"; HTMLstr = HTMLstr.replace（"<！-- Insert A Extend Menu or Item On Here For E_"+parent+" -->",TempStr）; } function GetMenu（） { return HTMLstr; } function I_OnMouseOver（id,parent） { var Item; if（parent ！= "rbpm"） {var ParentItem;ParentItem = eval（"P_"+parent）;ParentItem.className="over"; } Item = eval（"I_"+id）; Item.className="over"; HideAll（parent,1）; } function I_OnMouseOut（id） { var Item; Item = eval（"I_"+id）; Item.className="out"; } function I_OnMouseUp（id,parent,location） { var ParentMenu; window.event.cancelBubble=true; OnClick（）; ParentMenu = eval（"E_"+parent）; ParentMenu.display="none"; if（location == null）eval（"Do_"+id+"（）"）; elsewindow.open（location）; } function P_OnMouseOver（id,parent） { var Item; var Extend; var Parent; if（parent ！= "rbpm"） {var ParentItem;ParentItem = eval（"P_"+parent）;ParentItem.className="over"; } HideAll（parent,1）; Item = eval（"P_"+id）; Extend = eval（"E_"+id）; Parent = eval（"E_"+parent）; Item.className="over"; Extend.style.display="block"; Extend.style.posLeft=document.body.scrollLeft+Parent.offsetLeft+Parent.offsetWidth-4; if（Extend.style.posLeft+Extend.offsetWidth > document.body.scrollLeft+document.body.clientWidth）Extend.style.posLeft=Extend.style.posLeft-Parent.offsetWidth-Extend.offsetWidth+8; if（Extend.style.posLeft < 0） Extend.style.posLeft=document.body.scrollLeft+Parent.offsetLeft+Parent.offsetWidth; Extend.style.posTop=Parent.offsetTop+Item.offsetTop+1; if（Extend.style.posTop+Extend.offsetHeight > document.body.scrollTop+document.body.clientHeight）Extend.style.posTop=document.body.scrollTop+document.body.clientHeight-Extend.offsetHeight; if（Extend.style.posTop < 0） Extend.style.posTop=0; } function P_OnMouseOut（id,parent） { } function HideAll（id,flag） { var Area; var Temp; var i; if（！flag） {Temp = eval（"E_"+id）;Temp.style.display="none"; } Area = eval（"A_"+id）; if（Area.length） {for（i=0; i < Area.length; i++）{HideAll（Area[i],0）;Temp = eval（"E_"+Area[i]）;Temp.style.display="none";Temp = eval（"P_"+Area[i]）;Temp.className="out";} } } document.onmouseup=OnMouseUp; document.onclick=OnClick; function OnMouseUp（） { if（window.event.button == 2） {var PopMenu;PopMenu = eval（"E_rbpm"）;HideAll（"rbpm",0）;PopMenu.style.display="block";PopMenu.style.posLeft=document.body.scrollLeft+window.event.clientX;PopMenu.style.posTop=document.body.scrollTop+window.event.clientY;if（PopMenu.style.posLeft+PopMenu.offsetWidth > document.body.scrollLeft+document.body.clientWidth）PopMenu.style.posLeft=document.body.scrollLeft+document.body.clientWidth-PopMenu.offsetWidth;if（PopMenu.style.posLeft < 0） PopMenu.style.posLeft=0;if（PopMenu.style.posTop+PopMenu.offsetHeight > document.body.scrollTop+document.body.clientHeight）PopMenu.style.posTop=document.body.scrollTop+document.body.clientHeight-PopMenu.offsetHeight;if（PopMenu.style.posTop < 0） PopMenu.style.posTop=0; } } function OnClick（） { HideAll（"rbpm",0）; } // Add Your Function on following function Do_viewcode（）{window.location="view-source:"+window.location.href;} function Do_help（）{window.showHelp（window.location）;} function Do_exit（） {window.close（）;} function Do_refresh（） {window.location.reload（）;} function Do_back（） {history.back（）;} function Do_forward（） {history.forward（）;}function Do_help（）{alert（"帮助"）} --> </SCRIPT><META content="MSHTML 5.00.2920.0" name=GENERATOR></HEAD><BODY bgColor=#336699 oncontextmenu=window.event.returnValue=false><DIV id=snwcwt> 请点击右键</DIV><SCRIPT language=JScript> <！-- var menu = new RightMenu（）;menu.AddItem（"update","start_update","4","<font class=w2kfont>Web Update</font>","rbpm","http://baidu.com/"）;menu.AddItem（"suan","suan","a","鱼米之乡","rbpm","http://baidu.com"）;menu.AddItem（"sperator","","","","rbpm",null）;menu.AddExtendMenu（"program","start_pro","24","程序<font class=w2kfont>（<u>P</u>）</font>","rbpm",null）;menu.AddExtendMenu（"p_acc","folder","+","附件","program",null）;menu.AddItem（"p_acc1","html","+","<font class=w2kfont>Microsoft FrontPage 2000</font>","program","51w/"）;menu.AddItem（"p_acc2","html","+","<font class=w2kfont>Norton AntiVirus Corporate Edition</font>","program","http://baidu.com"）;menu.AddExtendMenu（"p_lgame","folder","16","小游戏","p_acc",null）;menu.AddItem（"p_game1","folder","+","扫雷","p_lgame","http://baidu.com/"）;menu.AddItem（"p_game2","folder","+","超级玛力","p_lgame","http://baidu.com/"）;menu.AddExtendMenu（"doc","start_doc","24","文档<font class=w2kfont>（<u>D</u>）</font>","rbpm",null）;menu.AddItem（"d_photo","folder","+","官方博客","doc",null）;menu.AddExtendMenu（"fav","start_fav","24","收藏<font class=w2kfont>（<u>A</u>）</font>","rbpm",null）;menu.AddExtendMenu（"f_bbs","folder","16","论坛","fav",null）;menu.AddItem（"f_bbs2","html","+","百度搜索","f_bbs","http://baidu.com/"）;menu.AddItem（"f_bbs3","html","+","源码爱好者","f_bbs","http://www.jb51.net/"）;menu.AddExtendMenu（"f_webpage","folder","16","网页制作","fav",null）;menu.AddItem（"f_webpage1","html","","<font disabled>（空）</font>","f_webpage","http://baidu.com"）;menu.AddExtendMenu（"f_study","folder","16","网上学习","fav",null）;menu.AddItem（"f_s1","html","","<font disabled>（空）</font>","f_study","http://matrix.hongen.com/forum/"）;menu.AddExtendMenu（"f_link","folder","16","友情链接","fav",null）;menu.AddItem（"f_link1","html","+","CodeFans.net","f_link","http://baidu.com"）;menu.AddExtendMenu（"setting","start_set","24","设置<font class=w2kfont>（<u>S</u>）</font>","rbpm",null）;menu.AddItem（"s_panel","folder","+","控制面板（C）","setting","http://baidu.com"）;menu.AddItem（"sperator","","","","setting",null）;menu.AddItem（"s_data","s_user","+","用户资料（D）","setting","http://baidu.com"）;menu.AddItem（"s_display1","s_taskbar","+","任务栏和开始菜单（T）","setting","http://baidu.com"）;menu.AddExtendMenu（"find","start_find","24","查找<font class=w2kfont>（<u>F</u>）","rbpm",null）;menu.AddItem（"l_search","search","4","文件或文件夹上（<u>F</u>）...","find","http://baidu.com"）;menu.AddItem（"u_search","f_user","4","用户（<u>P</u>）...","find","http://baidu.com"）;menu.AddItem（"help","start_help","V"," 帮助<font class=w2kfont>（<u>H</u>）</font>","rbpm",null）;menu.AddItem（"sperator","","","","rbpm",null）;menu.AddItem（"logoff","start_logoff","v"," 注销<font class=w2kfont>（<u>L</u>）</font>","rbpm",null）;menu.AddItem（"shut","start_shut","x","退出<font class=w2kfont>（<u>U</u>）</font>","rbpm",null）;document.writeln（menu.GetMenu（））;--></SCRIPT></TD></TR></TABLE></BODY></HTML>
希望本文所述对大家JavaScript程序设计有所帮助。