给html某个div绑定右键菜单,jquery实现在网页指定区域显示自定义右键菜单效果...

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

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

运行效果截图如下：

在线演示地址如下：

具体代码如下：

jQuery自定义区域的鼠标右键菜单

#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;}

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,

});

}

});

});

	tweet me
	facebook share
	myspace share
	e-mail this

嗨！您好，在这个区域内点击您的鼠标右键吧，会弹出一个自定义的右键菜单，和浏览器的右键菜单完全不一样哦！