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

前端技术 2023/09/08 JavaScript

本文实例讲述了JS实现不使用图片仿Windows右键菜单效果代码。分享给大家供大家参考，具体如下：

这里演示JS不使用图片仿Windows右键菜单效果，这款代码灵活使用了文鼎字，配合CSS和JS做出了这个和系统右键菜单很相似的东东。

运行效果截图如下：

在线演示地址如下：

http://demo.phpstudy.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 -->\\n\";
 HTMLstr += \"\\n\";
 HTMLstr += \"<!-- PopMenu Starts -->\\n\";
 HTMLstr += \"<div id=\'E_rbpm\' class=\'rm_div\'>\\n\";
 HTMLstr += \"<table width=\'100%\' border=\'0\' cellspacing=\'0\'>\\n\";
 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\'>\\n\";
 HTMLstr += \"<table width=\'100%\' border=\'0\' cellspacing=\'0\'>\\n\";
 HTMLstr += \"<!-- Insert A Extend Menu or Item On Here For E_rbpm -->\\n\";
 HTMLstr += \"</table></td></tr></table>\\n\";
 HTMLstr += \"</div>\\n\";
 HTMLstr += \"<!-- Insert A Extend_Menu Area on Here For E_rbpm -->\";
 HTMLstr += \"\\n\";
 HTMLstr += \"<!-- PopMenu Ends -->\\n\";
 }
 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\'>\\n\";
 TempStr += \"<table width=\'100%\' border=\'0\' cellspacing=\'0\'>\\n\";
 TempStr += \"<!-- Insert A Extend Menu or Item On Here For E_\"+id+\" -->\";
 TempStr += \"</table>\\n\";
 TempStr += \"</div>\\n\";
 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+\" -->\\n\";
 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>\\n\";
 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+\"\\n\";
  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+\"\\n\";
 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)\'\";
 else
  TempStr += \" 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>\\n\";
 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+\"()\");
 else
  window.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.phpstudy.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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/22910

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请联系我

微信
QQ好友
QQ空间
腾讯微博
新浪微博
人人网

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案

2024-02(2)
2023-06(1)
2023-05(1)
2023-04(14)
2023-03(3)
2023-01(6)
2022-12(5)
2022-11(5)
2022-07(2)
2022-06(4)
2022-05(3)
2022-03(1)
2021-12(6)
2021-11(1)
2021-10(3)
2021-09(5)
2021-07(5)
2021-02(2)
2021-01(7)
2020-12(18)
2020-11(14)
2020-10(12)
2020-09(10)
2020-08(22)
2020-07(2)
2020-06(1)
2020-04(5)
2020-03(9)
2020-02(7)
2020-01(9)
2019-12(8)
2019-11(10)
2019-10(11)
2019-09(17)
2019-08(16)
2019-07(6)
2019-06(3)
2019-04(1)
2019-03(8)
2019-02(5)
2019-01(1)
2018-11(2)
2018-10(3)
2018-09(1)
2018-08(3)
2018-07(3)
2018-06(7)
2018-04(4)
2018-03(5)
2018-02(4)
2018-01(22)
2017-12(3)
2017-11(5)
2017-10(15)
2017-09(26)
2017-08(1)
2017-07(3)