标签:super 事件 显示 fixed 默认 char top val osi
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>html菜单显示界面</title> <style type="text/css"> *{ margin: 0; padding: 0; } #btn{ width: 60px; height: 30px; background-color: #01AAED; color: white; display:none; position: fixed; left: 0%; top: 0%; } #btn:hover{ background-color: white; color: black; } </style> </head> <body> <input type="button" value="删除" id="btn"> <div style="text-align: center"> <img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" id="img"> </div> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script> <script> $(function(){ //此处是针对图片,如果这个元素上鼠标右键,将浏览器默认右键事件给拦截了 $("#img").bind("contextmenu",function(e){ return false; });
$("#btn").bind("contextmenu", function () { return false; }) $("#img").mousedown(function (e) { if (e.which == 3) { //获取鼠标的x轴 var x = e.pageX; //获取鼠标的Y轴 var y = e.pageY; //对我们设定的菜单元素位置移动到当前鼠标右键点击的位置,并且显示出来 $("#btn").css({ ‘top‘: y + ‘px‘, ‘left‘: x + ‘px‘, ‘display‘: ‘block‘, ‘position‘: ‘absolute‘ }); } }) }) </script> </body> </html>
标签:super 事件 显示 fixed 默认 char top val osi
原文地址:http://www.cnblogs.com/cnhonker/p/7667430.html