Rumah > Artikel > hujung hadapan web > jquery melaksanakan paparan kesan menu klik kanan tersuai dalam kawasan tertentu halaman web
jquery melaksanakan paparan kesan menu klik kanan tersuai dalam kawasan tertentu halaman web
- PHPzke hadapan
- 2016-05-16 15:42:581145semak imbas
Artikel ini terutamanya memperkenalkan jquery untuk merealisasikan kesan menu klik kanan tersuai dalam kawasan yang ditetapkan pada halaman web, yang melibatkan klik tetikus jquery dan pengikatan peristiwa dan teknik lain yang berkaitan. Ia mempunyai nilai rujukan tertentu keperluan boleh merujuk kepadanya, seperti berikut:
Ini adalah kesan menu klik kanan halaman web yang dilaksanakan oleh jquery Perbezaan daripada menu klik kanan tersuai yang lain ialah menu ini hanya sah dalam kawasan yang ditentukan ia melebihi kawasan yang ditentukan, ia akan dipaparkan selepas mengklik kanan Ia masih menu klik kanan penyemak imbas. Selepas menjalankan kesan, sila klik kanan tetikus di kawasan oren, dan menu klik kanan tersuai dengan ikon akan muncul, yang berbeza sama sekali daripada menu klik kanan penyemak imbas!
Tangkapan skrin kesan berjalan adalah seperti berikut:
Alamat demo dalam talian adalah seperti berikut:
http: //demo.jb51.net/ js/2015/jquery-web-area-right-click-menu-codes/
Kod khusus adalah seperti berikut:
<!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>Di atas adalah keseluruhan kandungan bab ini, lebih berkaitan Untuk tutorial, sila lawati Tutorial Video jQuery!