首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onOctober 22, 2015

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

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

运行效果截图如下：

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

在线演示地址如下：

具体代码如下：

<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","https://3water.com/");
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程序设计有所帮助。

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

- Author -

企鹅

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
谈谈关于JavaScript 中的 MVC 模式
Apr 11 Javascript
让页面上两个div中的滚动条(滑块)同步运动示例
Aug 07 Javascript
prototype框架中美元符号$用法分析
Jan 22 Javascript
原生JS封装ajax 传json，str，excel文件上传提交表单(推荐)
Jun 21 Javascript
简单实现js上传文件功能
Aug 21 Javascript
js生成word中图片处理方法
Jan 06 Javascript
微信小程序当前时间时段选择器插件使用方法详解
Dec 28 Javascript
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
Jan 22 Javascript
vue-cli脚手架引入弹出层layer插件的几种方法
Jun 24 Javascript
解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题
Sep 27 Javascript
JavaScript Dom 绑定事件操作实例详解
Oct 02 Javascript
浅谈vue.watch的触发条件是什么
Nov 07 Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
Oct 22 #Javascript
JS+CSS实现大气清新的滑动菜单效果代码
Oct 22 #Javascript
Webpack 实现 Node.js 代码热替换
Oct 22 #Javascript
JS+CSS实现仿msn风格选项卡效果代码
Oct 22 #Javascript
Node.js巧妙实现Web应用代码热更新
Oct 22 #Javascript
深入剖析JavaScript编程中的对象概念
Oct 21 #Javascript
JavaScript中Boolean对象的属性解析
Oct 21 #Javascript
最终幻想(1) 暴雪(1) LOL(1) 战锤40K(1) 艾尔登法环(1) 巫师(1) 遗弃(1) 我的世界(1) 小缇娜的奇幻之地(1) 东方异文石(1)
You might like
使用配置类定义Codeigniter全局变量
2014/06/12 PHP
php 利用array_slice函数获取随机数组或前几条数据
2015/09/30 PHP
php封装好的人民币数值转中文大写类
2015/12/20 PHP
PHP+HTML+JavaScript+Css实现简单爬虫开发
2016/03/28 PHP
CI框架的安全性分析
2016/05/18 PHP
php实现的支付宝网页支付功能示例【基于TP5框架】
2019/09/16 PHP
js AspxButton的客户端操作
2009/06/26 Javascript
JavaScript中检测变量是否存在遇到的一些问题
2013/11/11 Javascript
js添加select下默认的option的value和text的方法
2014/10/19 Javascript
JavaScript保留关键字汇总
2015/12/01 Javascript
浅析JS运动
2015/12/28 Javascript
javascript宿主对象之window.navigator详解
2016/09/07 Javascript
Bootstrap Img 图片样式(推荐)
2016/12/13 Javascript
javascript 组合按键事件监听实现代码
2017/02/21 Javascript
jstree单选功能的实现方法
2017/06/07 Javascript
jQuery 导航自动跟随滚动的实现代码
2018/05/30 jQuery
layui table数据修改的回显方法
2019/09/04 Javascript
webgl实现物体描边效果的方法介绍
2019/11/27 Javascript
Element Tooltip 文字提示的使用示例
2020/07/26 Javascript
浅谈Python中数据解析
2015/05/05 Python
python类和继承用法实例
2015/07/07 Python
Python中for循环和while循环的基本使用方法
2015/08/21 Python
python九九乘法表的实例
2017/09/26 Python
widows下安装pycurl并利用pycurl请求https地址的方法
2018/10/15 Python
python模块常用用法实例详解
2019/10/17 Python
Python函数参数类型及排序原理总结
2019/12/19 Python
python+opencv边缘提取与各函数参数解析
2020/03/09 Python
使用python批量转换文件编码为UTF-8的实现
2020/04/03 Python
通过代码实例了解Python3编程技巧
2020/10/13 Python
python调用百度AI接口实现人流量统计
2021/02/03 Python
洛佩桑酒店官方网站：Lopesan Hotels
2019/04/15 全球购物
职业生涯规划书的格式
2013/12/29 职场文书
2015年事业单位工作总结
2015/04/27 职场文书
班主任班级管理心得体会
2016/01/07 职场文书
五年级作文之劳动作文
2019/11/12 职场文书
ORM模型框架操作mysql数据库的方法
2021/07/25 MySQL