最近在某博客浏览时发现其采用了自定义右键菜单，于是想给自己的松子分享也添加一个。起初不怎么兼容，但查找资料后最终实现了预期效果。
技术松鼠早已实现轮盘状菜单，电脑浏览器未登录可见，你可右键试试。
想要代码就自己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等其他博客系统，你可以参考
如果觉着不错，欢迎点赞尝试哦~
