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 相关文章推荐
JS获取页面input控件中所有text控件并追加样式属性
Feb 25 Javascript
node.js中的fs.chown方法使用说明
Dec 16 Javascript
jquery实现的缩略图预览滑块实例
Jun 25 Javascript
最新最热最实用的15个jQuery插件汇总
Jul 05 Javascript
EasyUI在表单提交之前进行验证的实例代码
Jun 24 Javascript
jQuery实现链接的title快速出现的方法
Feb 20 Javascript
iOS + node.js使用Socket.IO框架进行实时通信示例
Apr 14 Javascript
使用Node.js搭建静态资源服务详细教程
Aug 02 Javascript
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 jQuery
如何制作一个Node命令行图像识别工具
Dec 12 Javascript
微信小程序自定义导航栏实例代码
Apr 05 Javascript
浅析微信小程序modal弹窗关闭默认会执行cancel问题
Oct 14 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使用file_get_contents发送http请求功能简单示例
2018/04/29 PHP
laravel框架模型中非静态方法也能静态调用的原理分析
2019/11/23 PHP
php上传图片并给图片打上透明水印的代码
2010/06/07 Javascript
jquery trim() 功能源代码
2011/02/14 Javascript
js中replace的用法总结
2013/12/27 Javascript
jQuery toggleClass应用实例(附效果图)
2014/04/06 Javascript
javascript常用方法汇总
2014/12/02 Javascript
深入JavaScript高级程序设计之对象、数组(栈方法,队列方法,重排序方法,迭代方法)
2015/12/01 Javascript
JavaScript重载函数实例剖析
2016/05/13 Javascript
浅谈JavaScript for循环 闭包
2016/06/22 Javascript
JavaScript定义数组的三种方法(new Array(),new Array('x','y')
2016/10/04 Javascript
微信小程序 教程之wxapp视图容器 scroll-view
2016/10/19 Javascript
慕课网题目之js实现抽奖系统功能
2017/09/19 Javascript
vue项目优化之通过keep-alive数据缓存的方法
2017/12/11 Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
2018/10/19 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
2019/03/15 Javascript
vue 引用自定义ttf、otf、在线字体的方法
2019/05/09 Javascript
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
2020/04/13 Javascript
[48:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第二场 1月29日
2021/03/11 DOTA
python网络编程学习笔记(10):webpy框架
2014/06/09 Python
python:socket传输大文件示例
2017/01/18 Python
Python基于identicon库创建类似Github上用的头像功能
2017/09/25 Python
Python通过cv2读取多个USB摄像头
2019/08/28 Python
Python requests获取网页常用方法解析
2020/02/20 Python
利用CSS3 动画 绘画 圆形动态时钟
2018/03/20 HTML / CSS
肯尼亚网上商城:Kilimall
2016/08/20 全球购物
初一英语教学反思
2014/01/11 职场文书
服装创业计划书范文
2014/02/05 职场文书
老公给老婆的保证书
2014/04/28 职场文书
银行纠风工作实施方案
2014/06/08 职场文书
五一活动标语
2014/06/30 职场文书
生物工程专业求职信
2014/09/03 职场文书
小学二年级数学教学计划
2015/01/20 职场文书
2019年度行政文员工作计划范本!
2019/07/04 职场文书
写作之关于描写老人的好段摘抄
2019/11/14 职场文书
Spring 使用注解开发
2022/05/20 Java/Android