在网页指定区域显示自定义的右键菜单

最新推荐文章于 2020-04-06 17:37:11 发布

xlhu618

最新推荐文章于 2020-04-06 17:37:11 发布

阅读量1.3k

点赞数

分类专栏： html 文章标签： html

html 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

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

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery自定义区域的鼠标右键菜单</title>
<script src="/ajaxjs/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="/jscss/demoimg/201311/twitter.png" ></td><td><a href="#">tweet me</a></td>
</tr>
<tr>
<td ><img src="/jscss/demoimg/201311/facebook.png" > </td><td><a href="#">facebook share</a></td>
</tr>
<tr>
<td ><img src="/jscss/demoimg/201311/myspace.png" > </td><td><a href="#">myspace share</a></td>
</tr>
<tr>
<td ><img src="/jscss/demoimg/201311/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>

xlhu618

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
在网页指定区域显示自定义的右键菜单

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

扫一扫