Heim > Artikel > Web-Frontend > jquery implementiert die Anzeige eines benutzerdefinierten Rechtsklick-Menüeffekts im angegebenen Bereich der Webseite
jquery implementiert die Anzeige eines benutzerdefinierten Rechtsklick-Menüeffekts im angegebenen Bereich der Webseite
- PHPznach vorne
- 2016-05-16 15:42:581145Durchsuche
In diesem Artikel wird hauptsächlich JQuery vorgestellt, um den benutzerdefinierten Rechtsklick-Menüeffekt in einem bestimmten Bereich der Webseite zu realisieren, einschließlich JQuery-Mausklicks und Ereignisbindung sowie anderer verwandter Techniken need kann wie folgt darauf verweisen:
Dies ist ein von jquery implementierter Webseiten-Rechtsklick-Menüeffekt. Der Unterschied zu anderen benutzerdefinierten Rechtsklick-Menüs besteht darin, dass dieses Menü nur innerhalb des angegebenen Bereichs gültig ist Wenn es den angegebenen Bereich überschreitet, wird es nach einem Rechtsklick angezeigt. Es handelt sich immer noch um das Rechtsklickmenü des Browsers. Nachdem Sie den Effekt ausgeführt haben, klicken Sie bitte mit der rechten Maustaste in den orangefarbenen Bereich. Daraufhin wird ein benutzerdefiniertes Rechtsklick-Menü mit einem Symbol angezeigt, das sich völlig vom Rechtsklick-Menü des Browsers unterscheidet!
Ein Screenshot des Laufeffekts lautet wie folgt:
Die Online-Demo-Adresse lautet wie folgt:
http: //demo.jb51.net/ js/2015/jquery-web-area-right-click-menu-codes/
Die spezifischen Codes lauten wie folgt:
<!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>Das Obige ist der gesamte Inhalt dieses Kapitels, weitere verwandte Tutorials finden Sie unter jQuery Video Tutorial!