js实现完全自定义可带多级目录的网页鼠标右键菜单方法
本文实例讲述了js实现完全自定义可带多级目录的网页鼠标右键菜单方法。分享给大家供大家参考。具体分析如下:
这是很不错的一个网页鼠标特性,这个代码可以控制网页中鼠标的右键菜单,完全按照你的意思打造,可以带多级的目录显示。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>JS自定义网页多级导航菜单</title> <styletype="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;} #rightMenuul{float:left;border:1pxsolid#979797;background:#f1f1f1url(images/line.png)24px0repeat-y;padding:2px;box-shadow:2px2px2pxrgba(0,0,0,.6);} #rightMenuulli{float:left;clear:both;height:24px;cursor:pointer;line-height:24px;white-space:nowrap;padding:030px;} #rightMenuulli.sub{background-repeat:no-repeat;background-position:right9px;background-image:url(images/arrow.png);} #rightMenuulli.active{background-color:#f1f3f6;border-radius:3px;border:1pxsolid#aecff7;height:22px;line-height:22px;background-position:right-8px;padding:029px;} #rightMenuulul{display:none;position:absolute;} </style> <scripttype="text/javascript"> vargetOffset={ top:function(obj){ returnobj.offsetTop+(obj.offsetParent?arguments.callee(obj.offsetParent):0) }, left:function(obj){ returnobj.offsetLeft+(obj.offsetParent?arguments.callee(obj.offsetParent):0) } }; window.onload=function() { varoMenu=document.getElementById("rightMenu"); varaUl=oMenu.getElementsByTagName("ul"); varaLi=oMenu.getElementsByTagName("li"); varshowTimer=hideTimer=null; vari=0; varmaxWidth=maxHeight=0; varaDoc=[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() { varoThis=this; varoUl=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() { varoThis=this; varoUl=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) { varevent=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"); returnfalse; }; //点击隐藏菜单 document.onclick=function() { oMenu.style.display="none" }; //取li中最大的宽度,并赋给同级所有li functionsetWidth(obj) { maxWidth=0; for(i=0;i<obj.children.length;i++) { varoLi=obj.children[i]; variWidth=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> <divid="rightMenu"> <ul> <li><strong>JavaScript学习</strong></li> <li> 毛票票 <ul> <li>网页特效原理分析</li> <li>响应用户操作</li> <li>提示框效果</li> <li>事件驱动</li> <li>元素属性操作</li> </ul> </li> <li> www.nhooo.com <ul> <li>改变网页背景颜色</li> <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>变量、类型、typeof、数据类型转换、变量作用域</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程序设计有所帮助。