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语言中的Literal Syntax特性分析
Mar 08 Javascript
JavaScript 定义function的三种方式小结
Oct 16 Javascript
动态改变div的z-index属性的简单实例
Aug 08 Javascript
微信WeixinJSBridge API使用实例
May 25 Javascript
jQuery实现的个性化返回底部与返回顶部特效代码
Oct 30 Javascript
基于jquery实现全屏滚动效果
Nov 26 Javascript
js仿微博实现统计字符和本地存储功能
Dec 22 Javascript
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
Jan 15 Javascript
vue中使用protobuf的过程记录
Oct 26 Javascript
JavaScript实现公告栏上下滚动效果
Mar 13 Javascript
vue中v-model对select的绑定操作
Aug 31 Javascript
JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法
Jan 29 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
Zerg基本策略
2020/03/14 星际争霸
通过对php一些服务器端特性的配置加强php的安全
2006/10/09 PHP
PHP 读取文件的正确方法
2009/04/29 PHP
PHP清除数组中所有字符串两端空格的方法
2014/10/20 PHP
学习YUI.Ext 第三天
2007/03/10 Javascript
JavaScript 入门·JavaScript 具有全范围的运算符
2007/10/01 Javascript
jquery 日期分离成年月日的代码
2010/05/14 Javascript
详解JS 比较两个Json对象的值是否相等的实例
2013/11/20 Javascript
调整小数的格式保留小数点后两位
2014/05/14 Javascript
JavaScript简单下拉菜单实例代码
2015/09/07 Javascript
javascript实现Email邮件显示与删除功能
2015/11/21 Javascript
JQuery Mobile实现导航栏和页脚
2016/03/09 Javascript
AngularJs Managing Service Dependencies详解
2016/09/02 Javascript
js实现手机发送验证码功能
2017/03/13 Javascript
Bootstrap fileinput文件上传预览插件使用详解
2017/05/16 Javascript
js事件委托和事件代理案例分享
2017/07/25 Javascript
Angular6封装http请求的步骤详解
2018/08/13 Javascript
Vue基于localStorage存储信息代码实例
2020/11/16 Javascript
[02:00]DAC2018主宣传片——龙征四海,剑问东方
2018/03/20 DOTA
跟老齐学Python之变量和参数
2014/10/10 Python
自己编程中遇到的Python错误和解决方法汇总整理
2015/06/03 Python
python 实现一个贴吧图片爬虫的示例
2017/10/12 Python
Python中enumerate()函数编写更Pythonic的循环
2018/03/06 Python
浅谈python 读excel数值为浮点型的问题
2018/12/25 Python
pytorch nn.Conv2d()中的padding以及输出大小方式
2020/01/10 Python
Python学习之路安装pycharm的教程详解
2020/06/17 Python
浅谈keras中的batch_dot,dot方法和TensorFlow的matmul
2020/06/18 Python
python中使用asyncio实现异步IO实例分析
2021/02/26 Python
澳大利亚天然护肤品、化妆品和健康产品一站式商店:Nourished Life
2018/12/02 全球购物
小学语文课后反思精选
2014/04/25 职场文书
新手上路标语
2014/06/20 职场文书
会计专业应届生自荐信
2014/06/28 职场文书
英语教育专业毕业生求职信
2014/08/28 职场文书
2014年学生会工作总结范文
2014/11/07 职场文书
物业工程部经理岗位职责
2015/04/09 职场文书
go web 预防跨站脚本的实现方式
2021/06/11 Golang