이 기사의 예에서는 다중 레벨 디렉토리가 있는 완전히 사용자 정의된 웹 페이지 마우스 오른쪽 버튼 클릭 메뉴를 구현하는 js 메소드를 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다. 이 코드는 웹페이지에서 마우스 오른쪽 버튼 클릭 메뉴를 제어할 수 있으며 원하는 대로 완벽하게 구축되었으며 다중 레벨 디렉토리를 표시할 수 있습니다. 코드 복사 코드는 다음과 같습니다. JS 자체 정의义网页多级导航菜单 <br> html,body{높이:100%;오버플로:숨김;}<br> body,div,ul,li{margin:0;padding:0;}<br> 본문{글꼴:12px/1.5 5fae8f6f96c59ed1;}<br> ul{목록 스타일 유형:없음;}<br> #오른쪽메뉴{위치:절대;상단:-9999px;왼쪽:-9999px;}<br> #rightMenu ul{float:left;border:1px solid #979797;배경:#f1f1f1 url(images/line.png) 24px 0 Repeat-y;padding:2px;box-shadow: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{배경-반복:no-repeat;배경-위치:오른쪽 9px;배경-이미지:url(images/arrow.png);}<br> #rightMenu ul li.active{배경 색상:#f1f3f6;테두리 반경:3px;테두리:1px 솔리드 #aecff7;높이:22px;라인 높이:22px;배경 위치:오른쪽 -8px;패딩:0 29px; }<br> #rightMenu ul ul{display:none;position:absolute;}<br> </스타일><br> <script type="text/javascript"><br> var getOffset = {<br> 상단: 함수(obj) {<br> return obj.offsetTop (obj.offsetParent ?args.callee(obj.offsetParent) : 0)<br> },<br> 왼쪽: 함수(obj) {<br> return obj.offsetLeft (obj.offsetParent ?args.callee(obj.offsetParent) : 0)<br> }<br> };<br> window.onload = 함수()<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 {<br> //为含有子菜单的li加上箭头<br> aLi[i].getElementsByTagName("ul")[0] && (aLi[i].className = "sub");<br> //鼠标移入<br> aLi[i].onmouseover = 함수()<br> {<br> var oThis = 이것;<br> var oUl = oThis.getElementsByTagName("ul");<br> //鼠标移入样式<br> oThis.className = " 활성";<br> //显示子菜单<br> if (oUl[0])<br> {<br> clearTimeout(hideTimer);<br> showTimer = setTimeout(함수 ()<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 = "차단";<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 = 함수()<br /> {<br /> var oThis = 이것;<br /> var oUl = oThis.getElementsByTagName("ul");<br /> //鼠标移样式<br /> oThis.className = oThis.className.replace(/s?active/,"");<br /> ClearTimeout(showTimer);<br /> hideTimer = setTimeout(함수 ()<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 = "차단";<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> false를 반환합니다.<br> };<br> //点击隐藏菜单<br> document.onclick = 함수()<br> {<br> oMenu.style.display = "없음"<br> };<br> //取li中最大的宽titude, 并赋给同级所有li<br> 함수 setWidth(obj)<br> {<br> 최대 너비 = 0;<br> for (i = 0; i {<br>var oLi = obj.children[i];<br> var iWidth = oLi.clientWidth -parseInt(oLi.currentStyle ? oLi.currentStyle["paddingLeft"] : getCompulatedStyle(oLi,null)["paddingLeft"]) * 2<br> if (iWidth > maxWidth) maxWidth = iWidth;<br> }<br> for (i = 0; i }<br> };<br> <br> </머리><br> <br> <center> 마우스 오른쪽 버튼 클릭 메뉴를 사용자 정의하려면 페이지를 마우스 오른쪽 버튼으로 클릭하여 효과를 확인하세요. <br> <div id="rightMenu"><br> <ul> <br> <li><strong>JavaScript 학습</strong></li><br> <li> <br> 스크립트하우스<br> <ul> <br> <li>웹 특수효과 원리 분석</li> <br> <li>사용자 작업에 대한 응답</li> <br> <li>프롬프트 상자 효과</li> <br> <li>이벤트 중심</li> <br> <li>요소 속성 작업</li> <br> </ul> <br> </li> <br> <li> <br> www.jb51.net<br> <ul> <br> <li>웹페이지 배경색 변경</li><br> <li>함수 매개변수</li> <br> <li>재사용성이 높은 함수 작성</li> <br> <li>126개의 편지함을 모두 선택했을 때의 효과</li> <br> <li>루핑 및 순회 작업</li> <br> </ul> <br> </li> <br> <li> <br> 제3과<br> <ul> <br> <li> <br> 자바스크립트 구성<br> <ul> <br> <li>ECMA스크립트</li> <br> <li>DOM</li> <br> <li>BOM</li> <br> <li>JavaScript 호환성 소스</li> <br> </ul> <br> </li> <br> <li>자바스크립트의 위치와 장점, 단점</li> <br> <li>변수, 유형, 유형, 데이터 유형 변환, 변수 범위</li> <br> <li> <br> 폐쇄<br> <ul> <br> <li>클로저란 무엇입니까</li><br> <li>간단한 신청</li> <br> <li>폐쇄의 단점</li> <br> </ul> <br> </li> <br> <li>연산자</li> <br> <li>프로그램 흐름 제어</li> <br> <li> <br> 타이머 사용법<br> <ul> <br> <li>setInterval</li><br> <li>setTimeout</li><br> </ul> <br> </li> <br> </ul> <br> </li> <br> </ul> <br> </div><br> </본문><br> </div>
