JavaScript CSS는 마우스 오른쪽 버튼 클릭 메뉴 효과를 생성합니다. code

JavaScript CSS는 마우스 오른쪽 버튼 클릭 메뉴 효과를 생성합니다. code_navigation 메뉴

WBOY

풀어 주다： 2016-05-16 18:57:59

원래의

1104명이 탐색했습니다.

렌더링:
JavaScript CSS는 마우스 오른쪽 버튼 클릭 메뉴 효과를 생성합니다. code_navigation 메뉴

<title>Css 및 자바스크립트 페이지 생성 우클릭 메뉴</title>
<style type="text/css"> 
body { 
font-family: "宋体"; 
font-size: 12px; 
} 
.skin0 { 
padding-top: 4px; 
text-align: left; 
width: 100px; 
border: 2px solid black; 
background-color: menu; 
font-family: "宋体"; 
line-height: 20px; 
cursor: default; 
visibility: hidden; 
} 
.skin1 { 
padding-top: 4px; 
cursor: default; 
font: menutext; 
text-align: left; 
font-family: "宋体"; 
font-size: 10pt; 
width: 100px; 
background-color: menu; 
border: 1 solid buttonface; 
visibility: hidden; 
border: 2 outset buttonhighlight; 
} 
</style>

<div id="ie5menu" class="skin0">
테스트 효과를 만들려면 마우스 오른쪽 버튼 클릭 메뉴를 사용하세요! 
<div onclick="alert('后退请三思！)">
</div>뒤로<div onclick="alert('祝你前程似锦，大胆往前走吧！')">
</div>앞으로<hr>
<div url="http://www.jb51.net" target="_blank" onclick="jumptoie5()">
</div>스크립트 홈<div url="http://www.jb51.net/photoshop/" target="_blank" onclick="jumptoie5()">
</div>포토샵 튜토리얼<div url="http://www.jb51.net/list/list_3_1.htm" target="_blank" onclick="jumptoie5()">
</div>자바스크립트<div url="http://www.jb51.net/list/list_114_1.htm" target="_blank" onclick="jumptoie5()">
</div>vb스크립트<hr>
<div url="http://www.jb51.net/softs/index.html" target="_blank" onclick="jumptoie5()">
</div>소프트웨어 다운로드<div url="http://www.mydown.com/codes/" target="_blank" onclick="jumptoie5()">
</div>소스코드 다운로드<hr>
<div url="http://www.jb51.net/list/list_6_1.htm" target="_blank" onclick="jumptoie5()">
</div>정규 표현식<div url="http://www.jb51.net/support.htm" onclick="jumptoie5()">
</div>연락처</div>

[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.

]

코드 설명:
1. 페이지가 로드되면 먼저 load1() 메서드
를 실행하여 현재 브라우저가 Internet Explorer인지 확인합니다. document.all은 true를 반환합니다. 그러면 다음 정의가 유효해야 합니다. 즉, 클라이언트가 사용하는 브라우저가 IE인 것으로 감지되면 사용자가 마우스 오른쪽 버튼 클릭 이벤트를 생성할 때 showmenuie5 함수가 호출되고, 사용자가 왼쪽 클릭 이벤트를 생성할 때 hidemenuie5 함수가 호출됩니다.
2. 다음으로 showmenuie5 및 hidemenuie5 함수를 통해 메뉴를 표시하고 숨기는 방법을 고려해야 합니다.
물론 여기 메뉴는 실제 우클릭 메뉴가 아니고 저희가 직접 만든 div이고, 이 div에 넣고 싶은 것들을 넣어두었습니다. 마우스 이벤트를 통해 함수를 호출하여 가시성을 제어하면 마우스 오른쪽 버튼을 사용하는 것과 동일한 효과를 얻을 수 있습니다.
이 블록의 가장 바깥쪽 레이어는 ID가 ie5menu인 div입니다. 우리는 해당 스타일을 skin0으로 정의했습니다. 또한 다른 스타일을 사용자 정의하고 skin0을 바꿀 수도 있습니다.
3. 메뉴 옵션 클릭 후 동작 jumptoie5() 함수는 마우스 오른쪽 버튼 클릭 메뉴에서 레이어를 클릭했을 때 일어나는 일, 즉 실행 옵션을 구현합니다.