이 기사에서는 JS의 다단계 디렉토리가있는 완전히 사용자 정의 된 웹 페이지 오른쪽 클릭 메뉴를 구현하는 방법에 대해 설명합니다. 참조를 위해 공유하십시오. 특정 분석은 다음과 같습니다.
이것은 매우 좋은 웹 마우스 기능입니다. 이 코드는 웹 페이지에서 마우스의 마우스 오른쪽 버튼을 클릭 할 수 있으며 소원에 따라 완전히 생성됩니다. 여러 수준의 카탈로그로 표시 할 수 있습니다.
코드를 다음과 같이 복사하십시오.
<html xmlns = "http://www.w3.org/1999/xhtml">
<헤드>
<meta http-equiv = "content-type"content = "text /html; charset = utf-8" />
<title> js 사용자 정의 웹 페이지 다단계 내비게이션 메뉴 </title>
<스타일 유형 = "텍스트/CSS">
HTML, BODY {높이 : 100%; 오버플로 : 숨겨진;}
Body, Div, Ul, Li {마진 : 0; 패딩 : 0;}
바디 {font : 12px/1.5/5fae/8f6f/96c5/9ed1;}
ul {목록 스타일 유형 : 없음;}
#rightmenu {위치 : 절대; 상단 : -9999px; 왼쪽 : -9999px;}
#RightMenu ul {float : 왼쪽; 테두리 : 1px Solid #979797; 배경 : #f1f1f1 URL (images/line.png) 24px 0 반복 -Y; 패딩 : 2px; Box-Shadow : 2px 2px 2px rgba (0,0,0, .6);}
#RightMenu ul Li {float : 왼쪽; 왼쪽; clear : 둘 다; 높이 : 24px; 커서 : 포인터; 선-높이 : 24px; 흰색 공간 : nowrap; 패딩 : 0 30px;}
#RightMenu ul Li.sub {Back
#RightMenu ul Li.Active {배경색 : #f1f3f6; Border-Radius : 3PX; 국경 : 1PX Solid #aecff7; 높이 : 22px; 선-높이 : 22px; 배경 위치 : 오른쪽 -8px; 패딩 : 0 29px;}
#rightmenu ul ul {디스플레이 : 없음; 위치 : 절대;}
</스타일>
<script type = "text/javaScript">
var getoffset = {
상단 : 함수 (obj) {
return obj.offsettop + (obj.offsetparent? arguments.callee (obj.offsetparent) : 0)
},
왼쪽 : 함수 (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])
{
클리어 타임 아웃 (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/, "");
클리어 타임 아웃 (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 = 함수 (이벤트)
{
var event = 이벤트 || Window.event;
omenu.style.display = "블록";
omenu.style.top = event.clienty + "px";
omenu.style.left = event.clientx + "px";
setwidth (aul [0]);
// 최대 표시 범위
maxwidth = adoc [0] -Emenu.offsetWidth;
Maxheight = Adoc [1] -Emenu.offsetheight;
// 메뉴 오버플로를 방지합니다
omenu.offsettop> maxheight && (omenu.style.top = maxheight + "px");
omenu.offsetleft> maxWidth && (omenu.style.left = maxWidth + "px");
거짓을 반환합니다.
};
// 메뉴를 숨기려면 클릭하십시오
document.onclick = function ()
{
omenu.style.display = "none"
};
// Li에서 가장 큰 너비를 제발하고 같은 수준에서 모든 LI에 할당하십시오.
함수 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";
}
};
</스크립트>
</head>
<body>
<center> 사용자 정의 마우스 오른쪽 버튼을 클릭하면 페이지를 마우스 오른쪽 버튼으로 클릭하여 효과를보십시오. </센터>
<div id = "RightMenu">
<ul>
<li> <strong> JavaScript Learning </strong> </li>
<li>
wulin.com
<ul>
<li> 웹 페이지 특수 효과 원칙 분석 </li>
<li> 사용자 작업에 응답 </li>
<li> 프롬프트 박스 효과 </li>
<li> 이벤트 중심 </li>
<li> 요소 속성 작동 </li>
</ul>
</li>
<li>
www.vevb.com
<ul>
<li> 웹 페이지의 배경색 변경 </li>
<li> 함수 매개 변수 전송 </li>
<li> 높은 재사용 기능의 쓰기 </li>
<li> 126 사서함 선택 효과 </li>
<li> 루프 및 트래버스 작업 </li>
</ul>
</li>
<li>
레슨 3
<ul>
<li>
자바 스크립트 구성
<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>
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.