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


Posted in Javascript onAugust 25, 2015

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

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

运行效果截图如下:

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

在线演示地址如下:

具体代码如下:

<!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 相关文章推荐
你真的了解JavaScript吗?
Feb 24 Javascript
jquery实现固定顶部导航效果(仿蘑菇街)
Mar 21 Javascript
使用Javascript简单实现图片无缝滚动
Dec 05 Javascript
在Html中使用Requirejs进行模块化开发实例详解
Apr 15 Javascript
canvas 绘制圆形时钟
Feb 22 Javascript
史上最全JavaScript数组去重的十种方法(推荐)
Aug 17 Javascript
剖析Angular Component的源码示例
Mar 23 Javascript
Vue props用法详解(小结)
Jul 03 Javascript
微信小程序仿RadioGroup改变样式的处理方案
Jul 13 Javascript
详解关于Vue版本不匹配问题(Vue packages version mismatch)
Sep 17 Javascript
JavaScript代理模式原理与用法实例详解
Mar 10 Javascript
详解VUE中的插值( Interpolation)语法
Oct 18 Javascript
jquery实现的3D旋转木马特效代码分享
Aug 25 #Javascript
jQuery+CSS实现的网页二级下滑菜单效果
Aug 25 #Javascript
jQuery实现点击小图显示大图代码分享
Aug 25 #Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
Aug 25 #Javascript
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
Aug 24 #Javascript
基于jQuery实现在线选座之高铁版
Aug 24 #Javascript
jQuery实现TAB风格的全国省份城市滑动切换效果代码
Aug 24 #Javascript
You might like
Yii2 中实现单点登录的方法
2018/03/09 PHP
Laravel框架实现超简单的分页效果示例
2019/02/08 PHP
PHP手机号码及邮箱正则表达式实例解析
2020/07/11 PHP
jquery中的 $(&quot;#jb51&quot;)与document.getElementById(&quot;jb51&quot;) 的区别
2011/07/26 Javascript
JavaScript实现SHA-1加密算法的方法
2015/03/11 Javascript
jquery插件Jplayer使用方法简析
2016/04/22 Javascript
bootstrap和jQuery.Gantt的css冲突 如何解决
2016/05/29 Javascript
解决在vue项目中webpack打包后字体不生效的问题
2018/09/01 Javascript
对angularjs框架下controller间的传值方法详解
2018/10/08 Javascript
vue安装和使用scss及sass与scss的区别详解
2018/10/15 Javascript
node.js使用 http-proxy 创建代理服务器操作示例
2020/02/10 Javascript
[01:52]深扒TI7聊天轮盘语音出处7
2017/05/11 DOTA
几个提升Python运行效率的方法之间的对比
2015/04/03 Python
Python利用Nagios增加微信报警通知的功能
2016/02/18 Python
Python排序算法之选择排序定义与用法示例
2018/04/29 Python
python中cPickle类使用方法详解
2018/08/27 Python
Python中面向对象你应该知道的一下知识
2019/07/10 Python
python实现遍历文件夹图片并重命名
2020/03/23 Python
零基础学python应该从哪里入手
2020/08/11 Python
python反编译教程之2048小游戏实例
2021/03/03 Python
利用CSS3的checked伪类实现OL的隐藏显示的方法
2010/12/18 HTML / CSS
用CSS3实现Win8风格的方格导航菜单效果
2013/04/10 HTML / CSS
使用CSS3来代替JS实现交互
2017/08/10 HTML / CSS
HTML5离线应用与客户端存储的实现
2018/05/03 HTML / CSS
canvas中普通动效与粒子动效的实现代码示例
2019/01/03 HTML / CSS
印尼旅游网站:via
2017/11/12 全球购物
ABOUT YOU匈牙利:500个最受欢迎的时尚品牌
2019/07/19 全球购物
如何将整数int转换成字串String
2014/03/21 面试题
在什么时候需要使用"常引用"
2015/12/31 面试题
班级入场式解说词
2014/02/01 职场文书
药学专业学生的自我评价分享
2014/02/06 职场文书
请假条的格式
2014/04/11 职场文书
父母对孩子说的话
2014/04/12 职场文书
2014年高二班主任工作总结
2014/12/16 职场文书
Java实现学生管理系统(IO版)
2022/02/24 Java/Android
纯CSS实现一个简单步骤条的示例代码
2022/07/15 HTML / CSS