提示：您可以先修改部分代碼再運行
<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>自訂多級右鍵菜單</title><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(img/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(img/arrow.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中最大的寬度, 並賦給同級所有lifunction 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"]) * 2if (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> <li>事件驅動</li> <li>元素屬性操作</li> </ul> </li> <li> 第二課 <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></td> </tr></table>
提示：您可以先修改部分代碼再運行
