jquery实现在网页指定区域显示自定义右键菜单效果
更新时间：2015年08月25日 09:56:44 作者：企鹅
这篇文章主要介绍了jquery实现在网页指定区域显示自定义右键菜单效果,涉及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() {
$('#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程序设计有所帮助。
您可能感兴趣的文章:
相关文章
大家都知道javascript是动态语言，它对动态的支持是与身俱来的。2010-05-05
基于PHP+Jquery制作的可编辑的表格的代码，需要的朋友可以参考下。2011-04-04
在IE10以上版本，微软为了提高IE输入框的便利性，增加了文本内容全部删除和密码眼睛功能，但是有些时候打开新的页面里，输入框却被锁定无法编辑，需要刷新一下页面，或者如果输入框有内容需要点击一下输入框后面的叉叉后才能输入，怎么解决呢，下面小编给大家解答下2016-10-10
jQuery on()方法绑定动态元素的点击事件实例代码浅析
这篇文章主要介绍了jQuery on()方法绑定动态元素的点击事件的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-06-06
今天学了jquery框架的简单使用。于是用它实现简单的增删改，接着也用原始的javascript实现同样的功能，两者对比可以看出jquery的强大2014-09-09
这篇文章主要为大家详细介绍了jQuery Tree Multiselect的使用方法，这个插件允许用户以树型的形式来呈现列表复选框的选择，多用于权限管理中用于分配不同的权限，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
这篇文章主要介绍了jQuery中的siblings用法,结合实例形式简单分析了jQuery中siblings的功能及用法,需要的朋友可以参考下2015-12-12
大家在做省市区下拉框联动,或者是产品分类联动,或者是部门联动等下拉框时怎么做? 是用ajaxpro.dll 还是jquery ajax呢2010-12-12
jQuery通过改变input的type属性实现密码显示隐藏切换功能
大家在做登录注册功能的时候都会遇到用户选择自己输入的密码是否显示需求，大家都是怎么实现的呢？今天小编给大家分享一种比较好用的方法jQuery通过改变input的type属性实现密码显示隐藏切换功能，需要的朋友参考下2017-02-02
这篇文章主要为大家详细介绍了jquery实现界面无刷新加载登陆注册，具有一定的参考价值，感兴趣的朋友可以参考一下2016-07-07
最新评论