首页
所有分类
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 相关文章推荐
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧
Nov 25 Javascript
本地对象Array的原型扩展实现代码
Dec 04 Javascript
父子窗体间传递JSON格式的数据的代码
Dec 25 Javascript
javaScript arguments 对象使用介绍
Oct 18 Javascript
javascript中Date对象的getDay方法使用指南
Dec 22 Javascript
JS动态修改表格cellPadding和cellSpacing的方法
Mar 31 Javascript
微信小程序 登陆流程详细介绍
Jan 17 Javascript
微信小程序网络请求wx.request详解及实例
May 18 Javascript
基于jQuery的表单填充实例
Aug 22 jQuery
echarts学习笔记之箱线图的分析与绘制详解
Nov 22 Javascript
从vue源码解析Vue.set()和this.$set()
Aug 30 Javascript
使用JS实现鼠标放上图片进行放大离开实现缩小功能
Jan 27 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
德生1994(1) YH-R296(1) 上海永华(1) ICF-F10(1) SRF-40W(1) PR-D3L(1) SRF-22W(1) 德劲1107(1) ICF-SW100(1) 华普R-96(1)
You might like
PHP禁止个别IP访问网站
2013/10/30 PHP
php中curl使用指南
2015/02/05 PHP
PHP扩展框架之Yaf框架的安装与使用
2016/05/18 PHP
php数组实现根据某个键值将相同键值合并生成新二维数组的方法
2017/04/26 PHP
定位地理位置PHP判断员工打卡签到经纬度是否在打卡之内
2019/05/23 PHP
Yii框架连表查询操作示例
2019/09/06 PHP
JavaScript 内置对象属性及方法集合
2010/07/04 Javascript
jquery maxlength使用说明
2011/09/09 Javascript
jQuery中live方法的重复绑定说明
2011/10/21 Javascript
jquery数组封装使用方法分享(jquery数组遍历)
2014/03/25 Javascript
ECMAScript 6即将带给我们新的数组操作方法前瞻
2015/01/06 Javascript
jQuery统计上传文件大小的方法
2015/01/24 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
2015/10/28 Javascript
JS实现slide文字框缩放伸展效果代码
2015/11/05 Javascript
微信小程序 ecshop地址三级联动实现实例代码
2017/02/28 Javascript
vue项目总结之文件夹结构配置详解
2017/12/13 Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
2018/04/17 Javascript
Vue表单控件绑定图文详解
2019/02/11 Javascript
深入浅析Vue 中 ref 的使用
2019/04/29 Javascript
vue之debounce属性被移除及处理详解
2019/11/13 Javascript
python实现猜数字游戏(无重复数字)示例分享
2014/03/29 Python
python sys.argv[]用法实例详解
2018/05/25 Python
Vue的el-scrollbar实现自定义滚动
2018/05/29 Python
python 计算平均平方误差(MSE)的实例
2019/06/29 Python
python设计微型小说网站(基于Django+Bootstrap框架)
2019/07/08 Python
CSS3+Sprite实现僵尸行走动画特效源码
2016/01/27 HTML / CSS
size?丹麦官网：英国伦敦的球鞋精品店
2019/04/15 全球购物
退伍老兵事迹材料
2014/01/31 职场文书
大学生活动总结模板
2014/07/02 职场文书
国际经济与贸易专业求职信
2014/07/10 职场文书
2014年十一国庆节爱国演讲稿
2014/09/23 职场文书
学生实习证明模板汇总
2014/09/25 职场文书
史上最牛辞职信
2015/05/13 职场文书
Python数据类型最全知识总结
2021/05/31 Python
MySQL中B树索引和B+树索引的区别详解
2022/03/03 MySQL
vue 给数组添加新对象并赋值
2022/04/20 Vue.js