jquery實作在網頁指定區域顯示自訂右鍵選單效果
- PHPz轉載
- 2016-05-16 15:42:581148瀏覽
這篇文章主要介紹了jquery實現在網頁指定區域顯示自訂右鍵選單效果，涉及jquery滑鼠點擊及事件綁定等相關技巧，具有一定參考借鑒價值，需要的朋友可以參考下，具體如下：
這是一個jquery實現的網頁右鍵選單效果，與其它自訂的右鍵選單不同之處在於，本選單只在指定區域內才有效，若超出指定區域的話，點擊右鍵後顯示的仍是瀏覽器的右鍵選單。運行效果後，請在橘色區域內點擊滑鼠右鍵，會彈出一個帶有圖示的自訂右鍵選單，和瀏覽器的右鍵選單完全不一樣！
運作效果截圖如下：
線上簡報網址如下：
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自定义区域的鼠标右键菜单</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 >
<p 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>
</p>
<p id="mask"> </p>
<p id="textbox">
<p>嗨！您好，在这个区域内点击您的鼠标右键吧，会弹出一个自定义的右键菜单，和浏览器的右键菜单完全不一样哦！<p/>
</p>
<p>
</body>
</html>以上就是本章的全部內容，更多相關教學請訪問jQuery影片教學！
陳述：
本文轉載於：jb51.net。如有侵權，請聯絡admin@php.cn刪除