JS实现仿Windows7风格的网页右键菜单效果代码


Posted in Javascript onSeptember 11, 2015

本文实例讲述了JS实现仿Windows7风格的网页右键菜单效果代码。分享给大家供大家参考。具体如下:

这是一款JS仿Windows7风格的网页右键菜单,可以多级展开的右键菜单,原生JS。可参考性强,学习JavaScript的朋友不可错过。本菜单用户体验极佳,兼容性良好,无jQuery。

运行效果截图如下:

JS实现仿Windows7风格的网页右键菜单效果代码

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>自定义多级右键菜单</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
html,body{height:100%;overflow:hidden;}
body,div,ul,li{margin:0;padding:0;}
body{font:12px/1.5 \5fae\8f6f\96c5\9ed1;}
ul{list-style-type:none;}
#rightMenu{position:absolute;top:-9999px;left:-9999px;}
#rightMenu ul{float:left;border:1px solid #979797;background:#f1f1f1 url(images/line.png) 24px 0 repeat-y;padding:2px;box-shadow:2px 2px 2px rgba(0,0,0,.6);}
#rightMenu ul li{float:left;clear:both;height:24px;cursor:pointer;line-height:24px;white-space:nowrap;padding:0 30px;}
#rightMenu ul li.sub{background-repeat:no-repeat;background-position:right 9px;background-image:url(images/arrow_win7.png);}
#rightMenu ul li.active{background-color:#f1f3f6;border-radius:3px;border:1px solid #aecff7;height:22px;line-height:22px;background-position:right -8px;padding:0 29px;}
#rightMenu ul ul{display:none;position:absolute;}
</style>
<script type="text/javascript">
var getOffset = {
 top: function (obj) {
  return obj.offsetTop + (obj.offsetParent ? arguments.callee(obj.offsetParent) : 0) 
 },
 left: function (obj) {
  return obj.offsetLeft + (obj.offsetParent ? arguments.callee(obj.offsetParent) : 0) 
 } 
};
window.onload = function ()
{
 var oMenu = document.getElementById("rightMenu");
 var aUl = oMenu.getElementsByTagName("ul");
 var aLi = oMenu.getElementsByTagName("li");
 var showTimer = hideTimer = null;
 var i = 0;
 var maxWidth = maxHeight = 0;
 var aDoc = [document.documentElement.offsetWidth, document.documentElement.offsetHeight];
 oMenu.style.display = "none";
 for (i = 0; i < aLi.length; i++)
 {
  //为含有子菜单的li加上箭头
  aLi[i].getElementsByTagName("ul")[0] && (aLi[i].className = "sub");
  //鼠标移入
  aLi[i].onmouseover = function ()
  {
   var oThis = this;
   var oUl = oThis.getElementsByTagName("ul");
   //鼠标移入样式
   oThis.className += " active";   
   //显示子菜单
   if (oUl[0])
   {
    clearTimeout(hideTimer);    
    showTimer = setTimeout(function ()
    {
     for (i = 0; i < oThis.parentNode.children.length; i++)
     {
      oThis.parentNode.children[i].getElementsByTagName("ul")[0] &&
      (oThis.parentNode.children[i].getElementsByTagName("ul")[0].style.display = "none");
     }
     oUl[0].style.display = "block";
     oUl[0].style.top = oThis.offsetTop + "px";
     oUl[0].style.left = oThis.offsetWidth + "px";
     setWidth(oUl[0]);
     //最大显示范围     
     maxWidth = aDoc[0] - oUl[0].offsetWidth;
     maxHeight = aDoc[1] - oUl[0].offsetHeight;
     //防止溢出
     maxWidth < getOffset.left(oUl[0]) && (oUl[0].style.left = -oUl[0].clientWidth + "px");
     maxHeight < getOffset.top(oUl[0]) && (oUl[0].style.top = -oUl[0].clientHeight + oThis.offsetTop + oThis.clientHeight + "px")
    },300);
   }   
  };
  //鼠标移出 
  aLi[i].onmouseout = function ()
  {
   var oThis = this;
   var oUl = oThis.getElementsByTagName("ul");
   //鼠标移出样式
   oThis.className = oThis.className.replace(/\s?active/,"");
   clearTimeout(showTimer);
   hideTimer = setTimeout(function ()
   {
    for (i = 0; i < oThis.parentNode.children.length; i++)
    {
     oThis.parentNode.children[i].getElementsByTagName("ul")[0] &&
     (oThis.parentNode.children[i].getElementsByTagName("ul")[0].style.display = "none");
    }
   },300);
  };
 } 
 //自定义右键菜单
 document.oncontextmenu = function (event)
 {
  var event = event || window.event;
  oMenu.style.display = "block";
  oMenu.style.top = event.clientY + "px";
  oMenu.style.left = event.clientX + "px";
  setWidth(aUl[0]);
  //最大显示范围
  maxWidth = aDoc[0] - oMenu.offsetWidth;
  maxHeight = aDoc[1] - oMenu.offsetHeight;
  //防止菜单溢出
  oMenu.offsetTop > maxHeight && (oMenu.style.top = maxHeight + "px");
  oMenu.offsetLeft > maxWidth && (oMenu.style.left = maxWidth + "px");
  return false;
 };
 //点击隐藏菜单
 document.onclick = function ()
 {
  oMenu.style.display = "none" 
 };
 //取li中最大的宽度, 并赋给同级所有li 
 function setWidth(obj)
 {
  maxWidth = 0;
  for (i = 0; i < obj.children.length; i++)
  {
   var oLi = obj.children[i];   
   var iWidth = oLi.clientWidth - parseInt(oLi.currentStyle ? oLi.currentStyle["paddingLeft"] : getComputedStyle(oLi,null)["paddingLeft"]) * 2
   if (iWidth > maxWidth) maxWidth = iWidth;
  }
  for (i = 0; i < obj.children.length; i++) obj.children[i].style.width = maxWidth + "px";
 }
};
</script>
</head>
<body>
<center>自定义右键菜单,请在页面点击右键查看效果。</center>
<div id="rightMenu">
 <ul>
 <li><strong>JavaScript 学习</strong></li>
 <li>
  第一课
  <ul>
  <li>响应用户操作</li>
  <li>事件驱动</li>
  <li>元素属性操作</li>
  </ul>
 </li>
 <li>
  第二课
  <ul>
  <li>改变网页背景颜色</li>
  <li>函数传参</li>
  <li>126邮箱全选效果</li>
  <li>循环及遍历操作</li>
  </ul>
 </li>
 <li>
  第三课
  <ul>
  <li>
   JavaScript组成
   <ul>
   <li>ECMAScript</li>
   <li>DOM</li>
   <li>BOM</li>
   <li>JavaScript兼容性来源</li>
   </ul>
  </li>
  <li>JavaScript出现的位置、优缺点</li>
  <li>变量、类型、变量作用域</li>
  <li>
   闭包
   <ul>
   <li>什么是闭包</li>
   <li>简单应用</li>
   <li>闭包缺点</li>
   </ul>
  </li>
  <li>运算符</li>
  <li>程序流程控制</li>
  <li>
   定时器的使用
   <ul>
   <li>setInterval</li>
   <li>setTimeout</li>
   </ul>
  </li>
  </ul>
 </li>
 </ul>
</div>
</body>
</html>

希望本文所述对大家的JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript 无提示关闭窗口脚本
Aug 17 Javascript
JavaScript 实现简单的倒计时弹窗DEMO附图
Mar 05 Javascript
jquery仿搜索自动联想功能代码
May 23 Javascript
laytpl 精致巧妙的JavaScript模板引擎
Aug 29 Javascript
JavaScript设计模式之装饰者模式介绍
Dec 28 Javascript
JavaScript操作Oracle数据库示例
Mar 06 Javascript
angularjs实现文字上下无缝滚动特效代码
Sep 04 Javascript
jQuery+正则+文本框只能输入数字的实现方法
Oct 07 Javascript
js闭包学习心得总结
Apr 17 Javascript
Vue中对比scoped css和css module的区别
May 17 Javascript
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
Sep 19 Javascript
weui上传多图片,压缩,base64编码的示例代码
Jun 22 Javascript
jQuery+css实现的蓝色水平二级导航菜单效果代码
Sep 11 #Javascript
js实现的后台左侧管理菜单代码
Sep 11 #Javascript
微信企业号开发之微信考勤Cookies的使用
Sep 11 #Javascript
微信企业号开发之微信考勤百度地图定位
Sep 11 #Javascript
JavaScript处理解析JSON数据过程详解
Sep 11 #Javascript
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
Sep 11 #Javascript
JavaScript实现算术平方根算法-代码超简单
Sep 11 #Javascript
You might like
PHP中全面阻止SQL注入式攻击分析小结
2012/01/30 PHP
php中防止恶意刷新页面的代码小结
2012/10/31 PHP
详细解读PHP中接口的应用
2015/08/12 PHP
php函数式编程简单示例
2019/08/08 PHP
利用javascript移动div层-javascript 拖动层
2009/03/22 Javascript
jQuery语法总结和注意事项小结
2012/11/11 Javascript
异步动态加载js与css文件的js代码
2013/09/15 Javascript
javascript内存管理详细解析
2013/11/11 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
2016/06/23 Javascript
jQuery基于排序功能实现上移、下移的方法
2016/11/26 Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
2016/12/12 Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
2017/04/25 jQuery
深入理解ES6学习笔记之块级作用域绑定
2017/08/19 Javascript
如何抽象一个Vue公共组件
2017/10/17 Javascript
vue+Java后端进行调试时解决跨域问题的方式
2017/10/19 Javascript
vue.js简单配置axios的方法详解
2017/12/13 Javascript
JS实现求5的阶乘示例
2019/01/21 Javascript
基于Koa(nodejs框架)对json文件进行增删改查的示例代码
2019/02/02 NodeJs
[01:21]辉夜杯战队访谈宣传片—CDEC
2015/12/25 DOTA
[32:47]完美世界DOTA2联赛 GXR vs IO 第二场 11.07
2020/11/09 DOTA
python清除指定目录内所有文件中script的方法
2015/06/30 Python
Python自动化运维之IP地址处理模块详解
2017/12/10 Python
详解Django中类视图使用装饰器的方式
2018/08/12 Python
Python实现字符型图片验证码识别完整过程详解
2019/05/10 Python
python3实现微型的web服务器
2019/09/03 Python
德国BA保镖药房韩文网:kr.ba.de
2017/09/04 全球购物
美国隐形眼镜销售网站:ContactsDirect
2017/10/28 全球购物
高级工程师岗位职责
2013/12/15 职场文书
教师业务学习制度
2014/01/25 职场文书
九年级历史教学反思
2014/01/27 职场文书
草船借箭教学反思
2014/02/03 职场文书
劳动纠纷调解协议书格式
2014/11/30 职场文书
python实现大文本文件分割成多个小文件
2021/04/20 Python
SpringBoot实现异步事件驱动的方法
2021/06/28 Java/Android
Mysql数据库表中为什么有索引却没有提高查询速度
2022/02/24 MySQL
解析探秘fescar分布式事务实现原理
2022/02/28 Java/Android