首页 » 技术 » Css » 网页右键菜单

效果

网页右键菜单

使用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";
            }   
		});

以下配置适用于小白(不太推荐,我自己就是小白)

一条龙配置

直接在标签前加入以下代码即可
《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》

标签:

未经允许不得转载:作者:王凯, 转载或复制请以 超链接形式 并注明出处 王凯博客
原文地址:《网页右键菜单》 发布于2020-10-07

分享到:
赞(0) 打赏 生成海报

评论 抢沙发

6 + 4 =


长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

荔枝云
欢庆双旦,主机全场5折!全场低至1元!年费主机仅需29!无需备案,极速访问!
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册