本文實例講述了js實作完全自訂可帶多層目錄的網頁滑鼠右鍵選單方法。分享給大家供大家參考。具體分析如下： 這是很不錯的一個網頁滑鼠特性，這個程式碼可以控制網頁中滑鼠的右鍵選單，完全按照你的意思打造，可以帶多層次的目錄顯示。 複製程式碼 程式碼如下: JS自訂網頁多層導覽選單 <br /> html,body{高度:100%;溢位:隱藏;}<br /> 正文,div,ul,li{邊距:0;填入:0;}<br /> 正文{字型：12px/1.5 5fae8f6f96c59ed1;}<br /> ul{列表樣式類型：無;}<br /> #rightMenu{位置：絕對；上：-9999px；左：-9999px；}<br /> #rightMenu ul{浮動：左；邊框：1px實心#979797；背景：#f1f1f1 url(images/line.png) 24px 0重複-y；填滿：2px；框陰影：2px 2px 2px rgba(0,0, 0 ,.6);}<br /> #rightMenu ul li{float:left;clear:both;height:24px;cursor:pointer;line-height:24px;white-space:nowrap;padding:0 30px;}<br /> #rightMenu ul li.sub{background-repeat:no-repeat;background-position:right 9px;background-image:url(images/arrow.png);}<br /> #rightMenu ul li.active{背景顏色：#f1f3f6；邊框半徑：3px；邊框：1px實心#aecff7；高度：22px；行高：22px；背景位置：右-8px；填充：0 29px； }<br /> #rightMenu ul ul{顯示：無；位置：絕對；}<br /> </風格><br /> <腳本類型=“text/javascript”><br /> var getOffset = {<br /> 上方：函數（obj）{<br /> return obj.offsetTop (obj.offsetParent ? argument.callee(obj.offsetParent) : 0)<br /> },<br /> 左：函數（obj）{<br /> return obj.offsetLeft (obj.offsetParent ? argument.callee(obj.offsetParent) : 0)<br /> }<br /> };<br /> window.onload = function ()<br /> {<br /> var oMenu = document.getElementById("rightMenu");<br /> var aUl = oMenu.getElementsByTagName("ul");<br /> var aLi = oMenu.getElementsByTagName("li");<br /> var showTimer = hideTimer = null;<br /> var i = 0;<br /> var maxWidth = maxHeight = 0;<br /> var aDoc = [document.documentElement.offsetWidth, document.documentElement.offsetHeight];<br /> oMenu.style.display = "無";<br /> for (i = 0; i < aLi.length; i )<br /> {<br /> //為包含子選單的li加上箭頭<br /> aLi[i].getElementsByTagName("ul")[0] && (aLi[i].className = "sub");<br /> //滑鼠移入<br /> aLi[i].onmouseover = function ()<br /> {<br /> var oThis = this;<br /> var oUl = oThis.getElementsByTagName("ul");<br /> //滑鼠移入樣式<br /> oThis.className = "活動";<br /> // 顯示子選單<br /> if (oUl[0])<br /> {<br /> 清除超時(hideTimer);<br /> showTimer = setTimeout(function ()<br /> {<br /> for (i = 0; i < oThis.parentNode.children.length; i )<br /> {<br /> oThis.parentNode.children[i].getElementsByTagName("ul")[0] &&<br /> (oThis.parentNode.children[i].getElementsByTagName("ul")[0].style.display = "none");<br /> }<br /> oUl[0].style.display = "block";<br /> oUl[0].style.top = oThis.offsetTop "px";<br /> oUl[0].style.left = oThis.offsetWidth "px";<br /> setWidth(oUl[0]);<br /> //最大顯示範圍<br /> maxWidth = aDoc[0] - oUl[0].offsetWidth;<br /> maxHeight = aDoc[1] - oUl[0].offsetHeight;<br /> //防止溢流<br /> 最大寬度< getOffset.left(oUl[0]) && (oUl[0].style.left = -oUl[0].clientWidth "px");<br /> 最大高度 < getOffset.top(oUl[0]) && (oUl[0].style.top = -oUl[0].clientHeight oThis.offsetTop oThis.clientHeight "px")<br /> },300);<br /> }<br /> };<br /> //滑鼠移出<br /> aLi[i].onmouseout = function ()<br /> {<br /> var oThis = this;<br /> var oUl = oThis.getElementsByTagName("ul");<br /> //滑鼠移出樣式<br /> oThis.className = oThis.className.replace(/s?active/,"");<br /> 清除超時(showTimer);<br /> hideTimer = setTimeout(function ()<br /> {<br /> for (i = 0; i < oThis.parentNode.children.length; i )<br /> {<br /> oThis.parentNode.children[i].getElementsByTagName("ul")[0] &&<br /> (oThis.parentNode.children[i].getElementsByTagName("ul")[0].style.display = "none");<br /> }<br /> },300);<br /> };<br /> }<br /> //自訂右鍵選單<br /> document.oncontextmenu = 函數（事件）<br /> {<br /> var 事件 = 事件 || window.event;<br /> oMenu.style.display = "block";<br /> oMenu.style.top = event.clientY "px";<br /> oMenu.style.left = event.clientX "px";<br /> setWidth(aUl[0]);<br /> //最大顯示範圍<br /> maxWidth = aDoc[0] - oMenu.offsetWidth;<br /> maxHeight = aDoc[1] - oMenu.offsetHeight;<br /> //防止選單溢位<br /> oMenu.offsetTop > maxHeight && (oMenu.style.top = maxHeight "px");<br /> oMenu.offsetLeft > maxWidth && (oMenu.style.left = maxWidth "px");<br /> 回傳錯誤；<br /> };<br /> //點選隱藏選單<br /> document.onclick = function ()<br /> {<br /> oMenu.style.display = "無"<br /> };<br /> //取li中最大的寬度，並賦給同級所有li<br /> 函數 setWidth(obj)<br /> {<br /> 最大寬度 = 0;<br /> for (i = 0; i < obj.children.length; i )<br /> {<br />var oLi = obj.children[i];<br /> var iWidth = oLi.clientWidth - parseInt(oLi.currentStyle ? oLi.currentStyle["paddingLeft"] : getComputedStyle(oLi,null)["paddingLeft"]) * 2<br /> if (iWidth > maxWidth) maxWidth = iWidth;<br /> }<br /> for (i = 0; i < obj.children.length; i ) obj.children[i].style.width = maxWidth "px";<br /> }<br /> };<br /> <br /> <br /> <body><br /> <center>自訂右鍵選單，請在頁面點選右鍵查看效果。 <br /> <div id="rightMenu"><br /> <ul><br /> <li><strong>JavaScript 學習<br /> <li><br /> 腳本之家<br /> <ul><br /> <li>網頁特效原理分析<br /> <li>響應用戶操作<br /> <li>提示框效果<br /> <li>事件驅動程式<br /> <li>元素屬性操作<br /> <br /> <br /> <li><br /> www.jb51.net<br /> <ul><br /> <li>改變網頁背景顏色<br /> <li>函數傳參<br /> <li>高重用性函數的編寫<br /> <li>126信箱全選效果<br /> <li>循環及遍歷操作<br /> <br /> <br /> <li><br /> 第三課<br /> <ul><br /> <li><br /> JavaScript組成<br /> <ul><br /> <li>ECMAScript<br /> <li>DOM<br /> <li>BOM<br /> <li>JavaScript相容性來源<br /> <br /> <br /> <li>JavaScript出現的位置、優缺點<br /> <li>變數、型別、typeof、資料型別轉換、變數作用域<br /> <li><br /> 閉包<br /> <ul><br /> <li>什麼是閉包<br /> <li>簡單應用<br /> <li>閉包缺點<br /> <br /> <br /> <li>運算子<br /> <li>程序流程控制<br /> <li><br /> 定時器的使用<br /> <ul><br /> <li>setInterval<br /> <li>setTimeout<br /> <br /> <br /> <br /> <br /> <br />
