本文實例講述了jquery實現在網頁指定區域顯示自定義右鍵菜單效果。分享給大家供大家參考。具體如下：
這是一個jquery實現的網頁右鍵菜單效果，與其它自定義的右鍵菜單不同之處在于，本菜單只在指定區域內才有效，若超出指定區域的話，點擊右鍵后顯示的仍是瀏覽器的右鍵菜單。運行效果后，請在橘色區域內點擊鼠標右鍵，會彈出一個帶圖標的自定義右鍵菜單，和瀏覽器的右鍵菜單完全不一樣哦！
運行效果截圖如下：
在線演示地址如下：
http://demo.VeVB.COm/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程序設計有所幫助。
新聞熱點
疑難解答
