王凯 网页右键菜单
效果
使用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";
}
});
以下配置适用于小白（不太推荐，我自己就是小白）
