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 相关文章推荐
js 点击按钮弹出另一页,选择值后,返回到当前页
May 26 Javascript
jquery.tmpl JQuery模板插件
Oct 10 Javascript
JS实现多物体缓冲运动实例代码
Nov 29 Javascript
不要使用jQuery触发原生事件的方法
Mar 03 Javascript
JS数组的赋值介绍
Mar 10 Javascript
让html页面不缓存js的实现方法
Oct 31 Javascript
javascript拖拽效果延伸学习
Apr 04 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
Jan 19 Javascript
详解webpack es6 to es5支持配置
May 04 Javascript
JavaScript之iterable_动力节点Java学院整理
Jun 29 Javascript
vue实现动态列表点击各行换色的方法
Sep 13 Javascript
vue组件之间通信方式实例总结【8种方式】
Feb 22 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
PHP执行批量mysql语句的解决方法
2013/05/02 PHP
destoon调用企业会员公司形象图片的实现方法
2014/08/21 PHP
Laravel 5.0 发布 新版本特性详解
2015/02/10 PHP
PHP yii实现model添加默认值的方法(两种方法)
2016/11/10 PHP
PHP设计模式之模板方法模式定义与用法详解
2018/04/02 PHP
Yii2框架redis基本应用示例
2018/07/13 PHP
php实现对短信验证码发送次数的限制实例讲解
2021/03/04 PHP
如何确保JavaScript的执行顺序 之实战篇
2011/03/03 Javascript
javascript分页代码(当前页码居中)
2012/09/20 Javascript
JS动态添加与删除select中的Option对象(示例代码)
2013/12/25 Javascript
jQuery、zepto、js常用小技巧
2017/02/12 Javascript
jQuery插件ContextMenu自定义图标
2017/03/15 Javascript
详解用webpack2.0构建vue2.0超详细精简版
2017/04/05 Javascript
JS计算距当前时间的时间差实例
2017/12/29 Javascript
JavaScript 有用的代码片段和 trick
2018/02/22 Javascript
vue组件中的数据传递方法
2018/05/14 Javascript
微信小程序有旋转动画效果的音乐组件实例代码
2018/08/22 Javascript
微信小程序开发中var that =this的用法详解
2020/01/18 Javascript
浅谈Vue 自动化部署打包上线
2020/06/14 Javascript
antd日期选择器禁止选择当天之前的时间操作
2020/10/29 Javascript
[04:56]经典回顾:前Ehome 与 前LGD
2015/02/26 DOTA
Ruby使用eventmachine为HTTP服务器添加文件下载功能
2016/04/20 Python
Python Requests模拟登录实现图书馆座位自动预约
2018/04/27 Python
Python线程同步的实现代码
2018/10/03 Python
Python常见数据结构之栈与队列用法示例
2019/01/14 Python
浅谈Python中(&amp;,|)和(and,or)之间的区别
2019/08/07 Python
为什么说python适合写爬虫
2020/06/11 Python
keras 模型参数,模型保存,中间结果输出操作
2020/07/06 Python
Qoo10马来西亚:全球时尚和引领潮流的购物市场
2016/08/25 全球购物
The Hut德国站点:时装、家居用品、美容等
2016/09/23 全球购物
戴森比利时官方网站:Dyson BE
2020/10/03 全球购物
下列程序在32位linux或unix中的结果是什么
2015/01/26 面试题
校园广播稿500字
2014/02/04 职场文书
Pytest allure 命令行参数的使用
2021/04/18 Python
Jupyter notebook 输出部分显示不全的解决方案
2021/04/24 Python
Python实现视频自动打码的示例代码
2022/04/08 Python