码迷,mamicode.com
首页 > Web开发 > 详细

网页右键弹出菜单

时间:2016-06-01 18:10:41      阅读:253      评论:0      收藏:0      [点我收藏+]

标签:

<!DOCTYPE HTML>
<html>
  <head>
      <title>My JSP ‘index.jsp‘ starting page</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
    <style type="text/css">
        *{margin:0;padding:0;}
        #box a{background: gray;text-decoration: none;color:#fff;font-size:12px;transition:all .5s linear;}
        #box a:hover{background: #000;color:pink;font-size:12px;transition:all .5s linear;}
        .desk{width:100px;border:1px solid #f00;border-radius:5px;box-shadow:0 0 10px #000;position:absolute; display:none;}/*position:absolute;display:none;必须加*/
        .desk ul li{list-style:none;border-bottom:1px solid #ddd;padding-left:10px;cursor:pointer; }/*list-style:none去除li左边的点*/
        .desk ul li:hover{background:#cdf;border-radius:5px;}
        .signbox{}
    </style>
  </head>
    <body>
    This is my JSP page. <br>
     <div id="box">
    <a href="javascript:void(0)">获取网页源代码</a>
    </div>
    <div class="desk" >
    <ul>
    <li onclick="menu(1)">新建页面</li>
    <li onclick="menu(2)">添加按钮</li>
    <li onclick="menu(3)">修改按钮</li>
    <li onclick="menu(4)">删除按钮</li>
    <li onclick="menu(5)">用户登录</li>
    <li onclick="menu(6)">用户注销</li>
    </ul>
    </div>


<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script type="text/Javascript">
  document.oncontextmenu=function(e){return false;};
    $(document).mousedown(function(e){
    var key=e.which;//鼠标键位(左键1 滚轮2 右键3)
    if(key==3){
        var x=e.clientX;
        var y=e.clientY;
        //alert(""+x+","+y);
        $(".desk").show().css({left:x,top:y});
    }
    
  });
    $(document).click(function(){
        $(".desk").hide();
    });
  </script>
  </body>
</html>

 

网页右键弹出菜单

标签:

原文地址:http://www.cnblogs.com/tianyang01/p/5550465.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!