jquery实现右键菜单 

 1 <!DOCTYPE html>
 2 <head>
 3     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 4     <title>jQuery自定义区域的鼠标右键菜单</title>
 5     <style type="text/css">
 6         #mask{position: absolute;left: 0;top: 0;z-index: 9000;display: block;}
 7         #myMenu{position: absolute;display: none;z-index: 9999;background: yellow;border: 1px solid;width: 200px;height: 155px;}
 8         #textbox{background: orange;width: 380px;border: 2px solid;}
 9         img{height: 30px;width: 30px;}
10         td{font-size: 20px;cursor: pointer;}
11         a{text-decoration: none;color: black;}
12         a:hover{color: white;background: black;}
13     </style>
14     <script type="text/javascript" src="../js/jquery-3.1.1.js"></script>
15     <script type="text/javascript">
16         var windowwidth;
17         var windowheight;
18         var checkmenu;
19         $(window).ready(function() {
20             $('#myMenu').hide();
21             $('#textbox').on("contextmenu",function(e){
22                 windowwidth = $(window).width();
23                 windowheight = $(window).height();
24                 checkmenu = 1;
25                 $('#mask').css({
26                     'height': windowheight,
27                     'width': windowwidth
28                 });
29                 $('#myMenu').show(500);
30                 $('#myMenu').css({
31                     'top':e.pageY+'px',
32                     'left':e.pageX+'px'
33                 });
34                 return false;
35             });
36             $('#mask').click(function(){
37                 $(this).height(0);
38                 $(this).width(0);
39                 $('#myMenu').hide(500);
40                 checkmenu = 0;
41                 return false;
42             });
43             $('#mask').on("contextmenu",function(){
44                 $(this).height(0);
45                 $(this).width(0);
46                 $('#myMenu').hide(500);
47                 checkmenu = 0;
48                 return false;
49             });
50             $(window).resize(function(){
51                 if(checkmenu == 1) {
52                     windowwidth = $(window).width();
53                     windowheight = $(window).height();
54                     $('#mask').css({
55                         'height': windowheight,
56                         'width': windowwidth,
57                     });
58                 }
59             });
60         });
61     </script>
62 </head>
63 <body>
64   <div id="myMenu" >
65     <table cellspace="3">
66         <tr>
67             <td ><img src="images/twitter.png" ></td><td><a href="#">tweet me</a></td>
68         </tr>
69         <tr>
70             <td ><img src="images/facebook.png" > </td><td><a href="#">facebook share</a></td>
71         </tr>
72         <tr>
73             <td ><img src="images/myspace.png" > </td><td><a href="#">myspace share</a></td>
74         </tr>
75         <tr>
76             <td ><img src="images/mail.png" > </td><td><a href="#">e-mail this</a></td>
77         </tr>
78     </table>
79   </div>
80   <div id="mask"> </div>
81    <div id="textbox">
82     <p>嗨！您好，在这个区域内点击您的鼠标右键吧，会弹出一个自定义的右键菜单，和浏览器的右键菜单完全不一样哦！<p/>
83    </div>
84 </body>
85 </html>

 

posted @ 2017-03-03 16:18  zhaobao1830  阅读(1540)  评论(0)    收藏  举报