快捷導(dǎo)航

jquery實(shí)現(xiàn)在網(wǎng)頁指定區(qū)域顯示自定義右鍵菜單效果

更新時間：2015年08月25日 09:56:44 作者：企鵝

這篇文章主要介紹了jquery實(shí)現(xiàn)在網(wǎng)頁指定區(qū)域顯示自定義右鍵菜單效果,涉及jquery鼠標(biāo)點(diǎn)擊及事件綁定等相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下

本文實(shí)例講述了jquery實(shí)現(xiàn)在網(wǎng)頁指定區(qū)域顯示自定義右鍵菜單效果。分享給大家供大家參考。具體如下：

這是一個jquery實(shí)現(xiàn)的網(wǎng)頁右鍵菜單效果，與其它自定義的右鍵菜單不同之處在于，本菜單只在指定區(qū)域內(nèi)才有效，若超出指定區(qū)域的話，點(diǎn)擊右鍵后顯示的仍是瀏覽器的右鍵菜單。運(yùn)行效果后，請在橘色區(qū)域內(nèi)點(diǎn)擊鼠標(biāo)右鍵，會彈出一個帶圖標(biāo)的自定義右鍵菜單，和瀏覽器的右鍵菜單完全不一樣哦！

運(yùn)行效果截圖如下：

在線演示地址如下：

http://demo.jb51.net/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自定義區(qū)域的鼠標(biāo)右鍵菜單</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>嗨！您好，在這個區(qū)域內(nèi)點(diǎn)擊您的鼠標(biāo)右鍵吧，會彈出一個自定義的右鍵菜單，和瀏覽器的右鍵菜單完全不一樣哦！<p/>
 </div>
 <div>
</body>
</html>

希望本文所述對大家的jquery程序設(shè)計有所幫助。

您可能感興趣的文章: