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 相关文章推荐
jquery 学习笔记一
Apr 07 Javascript
javascript 操作符(~、&amp;、|、^、)使用案例
Dec 31 Javascript
javascript修改图片src的方法
Jan 27 Javascript
jQuery.position()方法获取不到值的安全替换方法
Mar 13 Javascript
JQuery选择器、过滤器大整理
May 26 Javascript
jQuery插件制作之全局函数用法实例
Jun 01 Javascript
JS右下角广告窗口代码(可收缩、展开及关闭)
Sep 04 Javascript
总结JavaScript三种数据存储方式之间的区别
May 03 Javascript
AngularJS 作用域详解及示例代码
Aug 17 Javascript
jquery实现点击页面回到顶部
Nov 23 Javascript
Bootstrap 轮播(Carousel)插件
Dec 26 Javascript
Element-ui DatePicker显示周数的方法示例
Jul 19 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
用Flash图形化数据(一)
2006/10/09 PHP
初步介绍PHP扩展开发经验分享
2012/09/06 PHP
ThinkPHP框架实现session跨域问题的解决方法
2014/07/01 PHP
PHP使用适合阅读的格式显示文件大小的方法
2015/03/05 PHP
PHP简单创建压缩图的方法
2016/08/24 PHP
PHP7扩展开发之hello word实现方法详解
2018/01/15 PHP
Laravel解决nesting level错误和隐藏index.php的问题
2019/10/12 PHP
php设计模式之正面模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案
2011/07/26 Javascript
javascript对talbe进行动态添加、删除、验证实现代码
2012/03/29 Javascript
jQuery教程 $()包装函数来实现数组元素分页效果
2013/08/13 Javascript
jquery ajax 调用失败的原因示例介绍
2013/09/27 Javascript
js登录弹出层特效
2014/03/07 Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
2014/05/09 Javascript
通过JS来动态的修改url,实现对url的增删查改
2014/09/01 Javascript
jQuery往textarea中光标所在位置插入文本的方法
2015/06/26 Javascript
jquery采用oop模式class类的使用示例
2016/01/22 Javascript
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
2016/02/25 Javascript
js实现微博发布小功能
2017/01/12 Javascript
jQuery实现百度登录框的动态切换效果
2017/04/21 jQuery
详解PHP后期静态绑定分析与应用
2018/03/21 Javascript
js图片查看器插件用法示例
2019/06/22 Javascript
jquery实现弹窗(系统提示框)效果
2019/12/10 jQuery
vue插件--仿微信小程序showModel实现模态提示窗功能
2020/08/19 Javascript
vue mvvm数据响应实现
2020/11/11 Javascript
[02:07]DOTA2新英雄展现中国元素,完美“圣典”亮相央视
2016/12/19 DOTA
python smtplib模块实现发送邮件带附件sendmail
2018/05/22 Python
Python Charles抓包配置实现流程图解
2020/09/29 Python
安装python依赖包psycopg2来调用postgresql的操作
2021/01/01 Python
比利时买床:Beter Bed
2017/12/06 全球购物
如何查找和删除数据库中的重复数据
2014/11/05 面试题
Java如何支持I18N?
2016/10/31 面试题
小学英语教学反思案例
2014/02/04 职场文书
好习惯伴我成长演讲稿
2014/05/21 职场文书
2015年暑期社会实践报告
2015/07/13 职场文书
MySQL实例精讲单行函数以及字符数学日期流程控制
2021/10/15 MySQL