当前位置:澳门贵宾厅 > www.vip8888.com > 这是一款JS仿Windows7风格的网页右键菜单澳门贵宾厅
这是一款JS仿Windows7风格的网页右键菜单澳门贵宾厅
2019-12-07

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

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

自定义多级右键菜单html,body{height:100%;overflow:hidden;}body,div,ul,li{margin:0;padding:0;}body{font:12px/1.5 5fae8f6f96c59ed1;}ul{list-style-type:none;}#rightMenu{position:absolute;top:-9999px;left:-9999px;}#rightMenu ul{float:left;border:1px solid #979797;background:#f1f1f1 url 24px 0 repeat-y;padding:2px;box-shadow:2px 2px 2px rgba;}#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;}var getOffset = { top: function  { return obj.offsetTop + (obj.offsetParent ? arguments.callee : 0) }, left: function  { return obj.offsetLeft + (obj.offsetParent ? arguments.callee : 0) } };window.onload = function (){ var oMenu = document.getElementById; var aUl = oMenu.getElementsByTagName; var aLi = oMenu.getElementsByTagName; 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[0] && (aLi[i].className = "sub"); //鼠标移入 aLi[i].onmouseover = function () { var oThis = this; var oUl = oThis.getElementsByTagName; //鼠标移入样式 oThis.className += " active"; //显示子菜单 if  { clearTimeout; showTimer = setTimeout { for (i = 0; i < oThis.parentNode.children.length; i++) { oThis.parentNode.children[i].getElementsByTagName[0] && (oThis.parentNode.children[i].getElementsByTagName[0].style.display = "none"); } oUl[0].style.display = "block"; oUl[0].style.top = oThis.offsetTop + "px"; oUl[0].style.left = oThis.offsetWidth + "px"; setWidth; //最大显示范围 maxWidth = aDoc[0] - oUl[0].offsetWidth; maxHeight = aDoc[1] - oUl[0].offsetHeight; //防止溢出 maxWidth < getOffset.left && (oUl[0].style.left = -oUl[0].clientWidth + "px"); maxHeight < getOffset.top && (oUl[0].style.top = -oUl[0].clientHeight + oThis.offsetTop + oThis.clientHeight + "px") },300); } }; //鼠标移出 aLi[i].onmouseout = function () { var oThis = this; var oUl = oThis.getElementsByTagName; //鼠标移出样式 oThis.className = oThis.className.replace; clearTimeout; hideTimer = setTimeout { for (i = 0; i < oThis.parentNode.children.length; i++) { oThis.parentNode.children[i].getElementsByTagName[0] && (oThis.parentNode.children[i].getElementsByTagName[0].style.display = "none"); } },300); }; } //自定义右键菜单 document.oncontextmenu = function  { var event = event || window.event; oMenu.style.display = "block"; oMenu.style.top = event.clientY + "px"; oMenu.style.left = event.clientX + "px"; setWidth; //最大显示范围 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 { 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["paddingLeft"]) * 2 if  maxWidth = iWidth; } for (i = 0; i < obj.children.length; i++) obj.children[i].style.width = maxWidth + "px"; }};自定义右键菜单,请在页面点击右键查看效果。  JavaScript 学习  第一课  响应用户操作 事件驱动 元素属性操作    第二课  改变网页背景颜色 函数传参 126邮箱全选效果 循环及遍历操作    第三课   JavaScript组成  ECMAScript DOM BOM JavaScript兼容性来源   JavaScript出现的位置、优缺点 变量、类型、变量作用域  闭包  什么是闭包 简单应用 闭包缺点   运算符 程序流程控制  定时器的使用  setInterval setTimeout     

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