<!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>
时间: 2024-10-03 00:59:25