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

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

运行效果截图如下：

在线演示地址如下：

http://演示。JB 51。net/js/2015/jquery-web-area-右击-菜单-代码/

具体代码如下：

！DOCTYPE html heart heta http-equiv=' Content-TYPe ' Content=' text/html；charset=utf-8' /titlejQuery自定义区域的鼠标右键菜单/title脚本src=' http : jquery-1。6 .2 .量滴js '/脚本样式类型=' text/CSS ' # mask { position : absolute；左： 0；top : 0；z指数： 9000；显示器：块；} # MyMenu {位置：绝对值；显示器：无；z指数： 9999；背景：黄色；border: 1px固体；宽度： 200像素；高度： 155像素；} # textbox {背景：橙色；宽度： 380 pxborder: 2px固体；} img { height: 30px宽度： 30px} TD { font-size : 20px光标：指针；} a { text-decoration : none颜色：黑色；}a:悬停{ color:白色背景：黑色；}/style脚本类型=' text/JavaScript ' var窗口宽度；var windowheightvar checkmenu$(窗口)。ready(function() { $('#myMenu ')).hide()；$(“# textbox”).绑定(' contextmenu '，函数{ windowwidth=$(window ).宽度();windowheight=$(窗口)。高度();检查菜单=1；$(“# mask”).css({ 'height': windowheight，' width ' : window width })；$('#myMenu ').演出(500场);$('#myMenu ').css({ 'top':e.pageY 'px '，' left ' : e . Pagex ' px ' })；返回false })；$(“# mask”).单击(function(){$(this)).高度(0);$(这个)。宽度(0);$('#myMenu ').隐藏(500);检查菜单=0；返回false })；$(“# mask”).bind('contextmenu '，function(){$(this)).高度(0);$(这个)。宽度(0);$('#myMenu ').隐藏(500);检查菜单=0；返回false })；$(窗口)。resize(function(){ if(check menu==1){ window width=$(window))。宽度();windowheight=$(窗口)。高度();$(“# mask”).css({ 'height': windowheight，' width': windowwidth，})；}});});/script/head body div id=' myMenu ' table cell space=' 3 ' trtd img src=' http : images/Twitter。png/tdtdtda href=' # ' tweet me/a/TD/trtd img src=' http : images/脸书。png/TDT da href=' # '脸书分享/a/TD/trtd img src=' http 3360 images/MySpace。png '/TDT da href '嗨！您好，在这个区域内点击您的鼠标右键吧，会弹出一个自定义的右键菜单，和浏览器的右键菜单完全不一样哦！p//div/body/html希望本文所述对大家的jquery程序设计有所帮助。