网页右键菜单
效果图
使用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代码
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";
}
});
一条龙配置
直接在</body>标签前加入以下代码即可
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<style>
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}
</style>
<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>
<script type="text/javascript">
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";
}
});
</script>
网页右键菜单
本文链接:https://www.nswin.cn/click.html
版权声明:若无特殊注明,本文为《 LOVE 》原创,转载请保留文章出处。
文章标题:正文到此结束
发表吐槽
你肿么看?
既然没有吐槽,那就赶紧抢沙发吧!