jquery는 웹 페이지의 지정된 영역에 사용자 정의 오른쪽 클릭 메뉴 효과 표시를 구현합니다.-JS 튜토리얼-php.cn

jquery는 웹 페이지의 지정된 영역에 사용자 정의 오른쪽 클릭 메뉴 효과 표시를 구현합니다.

PHPz

풀어 주다： 2018-09-29 10:03:48

앞으로

1144명이 탐색했습니다.

이 기사에서는 주로 jquery 마우스 클릭과 이벤트 바인딩 및 기타 관련 기술을 포함하여 웹 페이지의 지정된 영역에서 사용자 정의 오른쪽 클릭 메뉴 효과를 구현하는 jquery를 소개합니다.

jquery로 구현한 웹페이지 오른쪽 클릭 메뉴 효과입니다. 다른 사용자 정의 오른쪽 클릭 메뉴와 다른 점은 이 메뉴가 지정된 영역 내에서만 유효하다는 것입니다. 지정된 영역을 초과하면 마우스 오른쪽 버튼을 클릭하면 표시됩니다. 여전히 브라우저의 오른쪽 클릭 메뉴입니다. 효과를 실행한 후 주황색 영역에서 마우스 오른쪽 버튼을 클릭하면 아이콘이 포함된 사용자 정의 오른쪽 클릭 메뉴가 팝업됩니다. 이는 브라우저의 오른쪽 클릭 메뉴와는 전혀 다릅니다!

실행 중인 효과의 스크린샷은 다음과 같습니다.

온라인 데모 주소는 다음과 같습니다.

http: //demo.jb51.net/ js/2015/jquery-web-area-right-click-menu-codes/

구체 코드는 다음과 같습니다.

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery自定义区域的鼠标右键菜单</title>
<script src="jquery-1.6.2.min.js"></script>
<style type="text/css">
#mask{position: absolute;left: 0;top: 0;z-index: 9000;display: block;}
#myMenu{position: absolute;display: none;z-index: 9999;background: yellow;border: 1px solid;width: 200px;height: 155px;}
#textbox{background: orange;width: 380px;border: 2px solid;}
img{height: 30px;width: 30px;}
td{font-size: 20px;cursor: pointer;}
a{text-decoration: none;color: black;}
a: hover{color: white;background: black;}
</style>
<script type="text/javascript">
var windowwidth;
var windowheight;
var checkmenu;
$(window).ready(function() {
 $(&#39;#myMenu&#39;).hide();
  $(&#39;#textbox&#39;).bind("contextmenu",function(e){
  windowwidth = $(window).width();
  windowheight = $(window).height();
  checkmenu = 1;
  $(&#39;#mask&#39;).css({
  &#39;height&#39;: windowheight,
  &#39;width&#39;: windowwidth
  });
  $(&#39;#myMenu&#39;).show(500); 
    $(&#39;#myMenu&#39;).css({
    &#39;top&#39;:e.pageY+&#39;px&#39;,
    &#39;left&#39;:e.pageX+&#39;px&#39;
    });
    return false;
 });
$(&#39;#mask&#39;).click(function(){
$(this).height(0);
$(this).width(0);
$(&#39;#myMenu&#39;).hide(500);
checkmenu = 0;
return false;
});
$(&#39;#mask&#39;).bind("contextmenu",function(){
$(this).height(0);
$(this).width(0);
$(&#39;#myMenu&#39;).hide(500);
checkmenu = 0;
return false;
});
$(window).resize(function(){
if(checkmenu == 1) {
windowwidth = $(window).width();
 windowheight = $(window).height();
 $(&#39;#mask&#39;).css({
 &#39;height&#39;: windowheight,
 &#39;width&#39;: windowwidth,
 });
}
});
});
</script>
</head>
<body >
<p id="myMenu" >
<table cellspace="3">
<tr>
<td ><img src="images/twitter.png" ></td><td><a href="#">tweet me</a></td>
</tr>
<tr>
<td ><img src="images/facebook.png" > </td><td><a href="#">facebook share</a></td>
</tr>
<tr>
<td ><img src="images/myspace.png" > </td><td><a href="#">myspace share</a></td>
</tr>
<tr>
<td ><img src="images/mail.png" > </td><td><a href="#">e-mail this</a></td>
</tr>
</table>
</p>
<p id="mask"> </p>
<p id="textbox">
<p>嗨！您好，在这个区域内点击您的鼠标右键吧，会弹出一个自定义的右键菜单，和浏览器的右键菜单完全不一样哦！<p/>
 </p>
 <p>
</body>
</html>

로그인 후 복사

위 내용은 이 장의 전체 내용이며, 더 많은 관련 튜토리얼을 보려면 jQuery 비디오 튜토리얼을 방문하세요!