最近在某博客浏览时发现其采用了自定义右键菜单，于是想给自己的松子分享也添加一个。起初不怎么兼容，但查找资料后最终实现了预期效果。
技术松鼠早已实现轮盘状菜单，电脑浏览器未登录可见，你可右键试试。
想要代码就自己view-source:分析一下，这里不多言啦。
本站效果如下：
图标原为彩色，但主题样式将图标统一为单色，采用的是iconfont
如何实现：
一、添加html代码
<div class="usercm" style="left: 199px; top: 5px; display: none;"> <ul> <li><a href="https://www.szfx.top/"><i class="iconfont icon-home"></i><span>首页</span></a></li> <li><a href="javascript:void(0);" onclick="getSelect();"><i class="iconfont icon-copy"></i><span>复制</span></a></li> <li><a href="javascript:void(0);" onclick="baiduSearch();"><i class="iconfont icon-Search"></i><span>搜索</span></a></li> <li><a href="javascript:history.go(1);"><i class="iconfont icon-qianjin"></i><span>前进</span></a></li> <li><a href="javascript:history.go(-1);"><i class="iconfont icon-houtui"></i><span>后退</span></a></li> <li style="border-bottom:1px solid gray"><a href="javascript:window.location.reload();"><i class="iconfont icon-lx-refresh"></i><span>刷新</span></a></li> <li><a href="https://www.szfx.top/links"><i class="iconfont icon-friends"></i><span>友人</span></a></li> <li><a href="https://www.szfx.top/guestbook"><i class="iconfont icon-pinglun"></i><span>留言</span></a></li> <li><a href="https://api.szfx.top/" target="_blank"><i class="iconfont icon-links"></i><span> API</span></a></li> </ul> </div>
如果想仅未登录和电脑端查看则用php函数包裹
<?php if((!is_user_logged_in())&&(!wp_is_mobile())){ ?> //code <?php } ?>
如果不想在header.php的<body>标签之后中引入上面代码，你可以JS添加$(‘body’).append…
二、引入图标和样式
若想要上面的样式，引入下面的css，当然也可选别的，比如很多主题自带fontawesome。
<link rel="stylesheet" href="https://at.alicdn.com/t/font_2397198_zlxtpqcjxp.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:0px 0px 15px #333;position:absolute;display:none;z-index:10000;opacity:0.9; border-radius: 8px;} 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;} div.usercm ul li a{color:#666;padding:0 15px;display:block} div.usercm ul li a:hover{color:#fff;background:#7486E7} 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} div.usercm{background:#fff !important;}
三、自定义JS函数
(function (a) { a.extend({ mouseMoveShow: function (b) { var d = 0, c = 0, h = 0, k = 0, e = 0, f = 0; a(window).mousemove(function (g) { d = a(window).width(); c = a(window).height(); h = g.clientX; k = g.clientY; e = g.pageX; f = g.pageY; h + a(b).width() >= d && (e = e - a(b).width() - 5); k + a(b).height() >= c && (f = f - a(b).height() - 5); a("html").on({ contextmenu: function (c) { 3 == c.which && a(b).css({ left: e, top: f }).show() }, click: function () { a(b).hide() } }) }) }, disabledContextMenu: function () { window.oncontextmenu = function () { return !1 } } }) })(jQuery); ; (function ($) { for (var a = navigator.userAgent, b = "Android;iPhone;SymbianOS;Windows Phone;iPad;iPod".split(";"), d = !0, c = 0; c < b.length; c++) if (0 < a.indexOf(b[c])) { d = !1; break; } d && ($.mouseMoveShow(".usercm"), $.disabledContextMenu()) })(jQuery); function getSelect() { "" == (window.getSelection ? window.getSelection() : document.selection.createRange().text) ? toastr.info("啊噢...你没还没选择文字呢！", "复制提示") : document.execCommand("Copy") } /*复制提示*/ $(document).ready(function () { $("body").bind('copy', function (e) { if ((window.getSelection ? window.getSelection() : document.selection.createRange().text) != '') { toastr.success("撰文不易，请保留出处，谢谢！", "复制成功！"); } else { toastr.info("啊噢...你没还没选择文字呢！", "复制提示"); } }) }); function baiduSearch() { var a = window.getSelection ? window.getSelection() : document.selection.createRange().text; "" == a ? toastr.info("啊噢...你没还没选择文字呢！", "搜索提示") : window.open("https://www.baidu.com/s?wd=" + a) }
注意： 网络上第二个函数大多是这样：$(function() {... });可能会出现错误:
TypeError: $ is not a function when calling jQuery function（大概是与主题自带函数重复）
参考stackoverflow的帖子（Google大法好，一下就找到了）
欢迎语JS代码
/*cookie设置*/ function setCookie(cname, cvalue, exdays) { var d = new Date(); d.setTime(d.getTime() + (exdays*24*60*60*1000)); var expires = "expires="+ d.toUTCString(); document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/"; }; function getCookie(cname) { var name = cname + "="; var decodedCookie = decodeURIComponent(document.cookie); var ca = decodedCookie.split(';'); for(var i = 0; i <ca.length; i++) { var c = ca[i]; while (c.charAt(0) == ' ') { c = c.substring(1); } if (c.indexOf(name) == 0) { return c.substring(name.length, c.length); } } return ""; }; /*加载完毕运行*/ $(function(){ /*网站打开提醒代码开始*/ if(getCookie('msg') != 1){ var t = document.createElement("a"); t.href = document.referrer; var msgTitle = t.hostname; var name = t.hostname.split(".")[1]; if("" !== document.referrer){ switch (name) { case 'bing': msgTitle = '必应搜索'; break; case 'baidu': msgTitle = '百度搜索'; break; case 'so': msgTitle = '360搜索'; break; case 'google': msgTitle = '谷歌搜索'; break; case 'sm': msgTitle = '神马搜索'; break; case 'sogou': msgTitle = '搜狗搜索'; break; default: msgTitle = t.hostname; } }; var time = (new Date).getHours(); var msg = ''; 23 < time || time <= 5 ? msg = "夜猫子好！": 5< time && time <= 7 ? msg = "早上好！": 7< time && time <= 11 ? msg = "上午好！": 11< time && time <= 14 ? msg = "中午好！": 14< time && time <= 17 ? msg = "下午好！": 17< time && time <= 19 ? msg = "傍晚好！": 19< time && time <= 23 && (msg = "晚上好！"); $.ajax({ type:"get", url:"https://api.szfx.top/userinfo/", async:true, success:function(data){ if(data.code != 200){ return; } setCookie('msg','1','1'); toastr.success(msg + data.data.location +'访客 '+' '+'使用 '+ data.data.os + ' '+data.data.browser +'设备','来自 '+msgTitle+' 的朋友'); } }); } });
代码带复制提示，如果是handsome主题，你可以使用其自带的提示框函数
$.message({ title: '复制提示', message: "啊噢...你没还没选择文字呢！", type: 'warning' })
如果是Wordpress等其他博客系统，你可以参考
如果觉着不错，欢迎点赞尝试哦~
右键粘贴怎么弄
给你提供一下思路，复制的时候把内容写入cookie，粘贴的时候调用cookie
我弄好了，就是不知道怎么回事，我那个快捷键可以粘贴，然后右键不能粘贴，不知道怎么回事
我写了一段代码，快捷键可以粘贴，然后右键粘贴选项粘贴不了，你能帮我看看吗