飞羽映月

效果

使用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>