网页右键菜单
效果
使用jquery
需要引入的话,可以参考以下代码
请在本文章的代码中《》改为英文<> 《script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"》《/script》
分离的代码
按web标准将css、js,html自行添加到对应文件中
CSS代码
a{text-decoration: none;} div.usercm{background-repeat:no-repeat;background-position:center center;background-size:cover;background-color:#fff;font-size:13px!important;width:130px;-moz-box-shadow:1px 1px 3px rgba(0,0,0,.3);box-shadow:1px 1px 3px rgba(0,0,0,.3);position:fixed;display:none;z-index:10000;opacity:0.9;} div.usercm ul{list-style-type:none;list-style-position:outside;margin:0px;padding:0px;display:block} div.usercm ul li{margin:0px;padding:0px;line-height:35px;border-bottom:1px solid #ccc;} div.usercm ul li a{color:#666;padding:0 15px;display:block} div.usercm ul li a:hover{color:#fff;background:rgba(170,222,18,0.88)} div.usercm ul li a i{margin-right:10px} a.disabled{color:#c8c8c8!important;cursor:not-allowed} a.disabled:hover{background-color:rgba(255,11,11,0)!important}
html代码
《div class="usercm" id="right-menu" style="left: 772px; top: 138px; display: none;"》 《ul》 《li》《a href="javascript:void(0);" onclick="getcopy();"》《i class="fa fa-clipboard fa-fw"》《/i》《span》复制文字《/span》《/a》《/li》 《li》《a href="javascript:window.location.reload();"》《i class="fa fa-refresh fa-fw"》《/i》《span》刷新页面《/span》《/a》《/li》 《li》《a href="javascript:history.go(1);"》《i class="fa fa-arrow-right fa-fw"》《/i》《span》前进一页《/span》《/a》《/li》 《li》《a href="javascript:history.go(-1);"》《i class="fa fa-arrow-left fa-fw"》《/i》《span》后退一页《/span》《/a》《/li》 《li》《a href="javascript:void(0);" onclick="qh();"》《i class="fa fa-home fa-fw"》《/i》《span》原始右键《/span》《/a》《/ 《/ul》 《/div》
javascript代码
# 商业转载请联系作者获得授权,非商业转载请注明出处。 # For commercial use, please contact the author for authorization. For non-commercial use, please indicate the source. # 协议(License):署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) # 作者(Author):朱斌 # 链接(URL):https://blog.toomey.top/archives/1771 # 来源(Source):TOOMEY'S BLOG function getcopy(){ document.execCommand('copy'); }; function qh(){ window.oncontextmenu = function(e){ e.stopPropagation(); } var menu = document.getElementById("right-menu"); menu.style.display = "none"; }; $(function(){ window.oncontextmenu = function(e){ e.preventDefault(); //阻止浏览器自带的右键菜单显示 var menu = document.getElementById("right-menu"); menu.style.display = "block"; //将自定义的“右键菜单”显示出来 menu.style.left = e.clientX + "px"; //设置位置,跟随鼠标 menu.style.top = e.clientY+"px"; } window.onclick = function(e){ //点击窗口,右键菜单隐藏 var menu = document.getElementById("right-menu"); menu.style.display = "none"; } });
以下配置适用于小白(不太推荐,我自己就是小白)