jquery实现在网页指定区域显示自定义右键菜单效果

前端技术 2023/09/03 JavaScript

本文实例讲述了jquery实现在网页指定区域显示自定义右键菜单效果。分享给大家供大家参考。具体如下：

这是一个jquery实现的网页右键菜单效果，与其它自定义的右键菜单不同之处在于，本菜单只在指定区域内才有效，若超出指定区域的话，点击右键后显示的仍是浏览器的右键菜单。运行效果后，请在橘色区域内点击鼠标右键，会弹出一个带图标的自定义右键菜单，和浏览器的右键菜单完全不一样哦！

运行效果截图如下：

在线演示地址如下：

http://demo.phpstudy.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() {
 $(\'#myMenu\').hide();
  $(\'#textbox\').bind(\"contextmenu\",function(e){
  windowwidth = $(window).width();
  windowheight = $(window).height();
  checkmenu = 1;
  $(\'#mask\').css({
  \'height\': windowheight,
  \'width\': windowwidth
  });
  $(\'#myMenu\').show(500); 
    $(\'#myMenu\').css({
    \'top\':e.pageY+\'px\',
    \'left\':e.pageX+\'px\'
    });
    return false;
 });
$(\'#mask\').click(function(){
$(this).height(0);
$(this).width(0);
$(\'#myMenu\').hide(500);
checkmenu = 0;
return false;
});
$(\'#mask\').bind(\"contextmenu\",function(){
$(this).height(0);
$(this).width(0);
$(\'#myMenu\').hide(500);
checkmenu = 0;
return false;
});
$(window).resize(function(){
if(checkmenu == 1) {
windowwidth = $(window).width();
 windowheight = $(window).height();
 $(\'#mask\').css({
 \'height\': windowheight,
 \'width\': windowwidth,
 });
}
});
});
</script>
</head>
<body >
<div 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>
</div>
<div id=\"mask\"> </div>
<div id=\"textbox\">
<p>嗨！您好，在这个区域内点击您的鼠标右键吧，会弹出一个自定义的右键菜单，和浏览器的右键菜单完全不一样哦！<p/>
 </div>
 <div>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

本文地址：https://www.stayed.cn/item/6307

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案