仿Windows7气魄威风凛凛的自界说网页右键菜单代码

发布时间：2018-09-02 14:13:46 所属栏目：创业来源：站长网

导读：仿Windows7气魄威风凛凛的网页右键菜单，可以多级睁开的右键菜单，相同于这样的实例猛火网早年的文章中有一些，此刻不妨往返首一下，譬喻《JavaScript模仿Windows体系右键菜单代码》、《JS+CSS替代网页右键菜单,动感,缓冲,兼容》、《巧用javascript自界说网页右键

　　仿Windows7气魄威风凛凛的网页右键菜单，可以多级睁开的右键菜单，相同于这样的实例猛火网早年的文章中有一些，此刻不妨往返首一下，譬喻《JavaScript模仿Windows体系右键菜单代码》、《JS+CSS替代网页右键菜单,动感,缓冲,兼容》、《巧用javascript自界说网页右键菜单》和《将IE右键菜单打造成Windows右键气魄威风凛凛》等，个中最后一个殊效与本文所讲的结果相干无几，我们来看一下。

　　代码演示：

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>仿WIN7的自界说多级右键菜单</title> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <style type="text/css"> 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(/uploads/allimg/1107/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(/uploads/allimg/1107/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); }; } //来自烈-火-学-院 VeryHuo．COM //自界说右键菜单 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><b>Java</b>Script 进修</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><br /><center>如不能表现结果，请按Ctrl+F5革新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提醒：可修改儿女码再运行!

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

首富马斯克谈成功？他	从先行者到制定者，轻
中国互联网的新一轮机	马斯克想辞职做专业网