jqueryはWebページの指定領域にカスタム右クリックメニュー効果の表示を実装します-jsチュートリアル-php.cn

jqueryはWebページの指定領域にカスタム右クリックメニュー効果の表示を実装します

PHPz

リリース： 2018-09-29 10:03:48

転載

1145 人が閲覧しました

この記事では主に、Web ページの指定された領域でカスタムの右クリックメニュー効果を実現するための jQuery を紹介します。これには、JQuery のマウスクリックやイベントバインディング、その他の関連テクニックが含まれます。これには、一定の参考値があります。

これは、jquery によって実装された Web ページの右クリックメニュー効果です。他のカスタマイズされた右クリックメニューとの違いは、このメニューが指定された領域内でのみ有効であることです。指定した領域を超える場合は、右クリック後に表示されます。これはブラウザの右クリックメニューです。エフェクトを実行した後、オレンジ色の領域でマウスを右クリックすると、ブラウザの右クリックメニューとはまったく異なる、アイコンの付いたカスタムの右クリックメニューが表示されます。

実行中のエフェクトのスクリーンショットは次のとおりです:

オンラインデモのアドレスは次のとおりです:

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 ビデオチュートリアルをご覧ください。