本文最后更新于 91 天前，其中的信息可能已经有所发展或是发生改变。
1、代码实现
window.onload = function () {
(function () {
// 自定义右键菜单内容并插入到body最后一个节点前
let dom = `
<div id="rightMenuBars">
<div class="rightMenu-group rightMenu-small">
<div class="rightMenu-item">
<i class="fa fa-chevron-left" aria-hidden="true"></i>
</div>
<div class="rightMenu-item">
<i class="fa fa-chevron-right" aria-hidden="true"></i>
</div>
<div class="rightMenu-item">
<i class="fa fa-refresh" aria-hidden="true"></i>
</div>
<div class="rightMenu-item">
<i class="fa fa-chevron-up" aria-hidden="true"></i>
</div>
</div>
</div>
<div id="rightMenuLinks">
<div class="rightMenu-group rightMenu-line">
<a class="rightMenu-item">
<i class="fa fa-photo" aria-hidden="true"></i>
<span>蓝猫图床</span>
</a>
<a class="rightMenu-item">
<i class="fa fa-cloud" aria-hidden="true"></i>
<span>个人云盘</span>
</a>
<a class="rightMenu-item">
<i class="fa fa-book" aria-hidden="true"></i>
<span>书籍阅读</span>
</a>
<a class="rightMenu-item">
<i class="fa fa-external-link" aria-hidden="true"></i>
<span>接口文档</span>
</a>
</div>
</div>
`;
let rightMenuDiv = document.createElement("div");
rightMenuDiv.id = "rightMenu";
let body = document.body;
rightMenuDiv.innerHTML = dom;
body.insertBefore(rightMenuDiv, body.lastChild);
// 引入外部css文件
let link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href =
"https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css";
document.head.appendChild(link);
/* 创建style标签并设置菜单样式 */
let rightMenuStyle = document.createElement("style");
rightMenuStyle.innerHTML =
"#rightMenu{display:none;font-size:20px;position:fixed;padding:0 0.25rem;width:9rem;height:fit-content;top:10%;left:10%;background-color: rgb(calc(0 + 255 * 0.92), calc(150 + (255 - 150) * 0.92), calc(136 + (255 - 136) * 0.92));;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);transform:translateZ(0);color:#32325d;border-radius:12px;z-index:999;border:1px solid #e3e8f7;user-select:none;box-shadow:0 0 12px 4px rgba(0,0,0,0.05);transition:border 0.3s;font-weight:500;}#rightMenu:hover{border:1px solid #009688;box-shadow:0 8px 12px -3px #4259ef23;}#rightMenu .rightMenu-group{padding:0.35rem 0.3rem;transition:0.3s;}#rightMenu .rightMenu-line{border-top:1px dashed #4259ef23;}#rightMenu .rightMenu-group.rightMenu-small{display:flex;justify-content:space-between;}#rightMenu .rightMenu-group .rightMenu-item{border-radius:8px;transition:0.3s;}#rightMenu .rightMenu-line .rightMenu-item{margin:0.25rem 0;padding:0.25rem 0;}#rightMenu .rightMenu-group a{background-color:transparent;color:#32325d;text-decoration:none;transition:all 0.2s ease 0s;overflow-wrap:break-word;-webkit-user-drag:none;}#rightMenu .rightMenu-group.rightMenu-line .rightMenu-item{display:flex;}#rightMenu .rightMenu-group .rightMenu-item:hover{cursor: pointer !important;background-color:#009688;color:#fff;box-shadow:0 8px 12px -3px #4259ef23;}#rightMenu .rightMenu-group .rightMenu-item i{display:inline-block;text-align:center;line-height:1.5rem;width:1.5rem;padding:0 0.25rem;font-size:18px;color:#32325d;}#rightMenu .rightMenu-line .rightMenu-item i{margin:0 0.25rem;}#rightMenu .rightMenu-group .rightMenu-item span{line-height:1.5rem;}.rightMenu-small .rightMenu-item{width:30px;height:30px;line-height:30px;display:flex;align-items:center;justify-content:center;}";
document.getElementsByTagName("head").item(0).appendChild(rightMenuStyle);
})();
// 如果菜单已经存在
let rightMenu = document.getElementById("rightMenu");
if (rightMenu) {
// 定义菜单显示与隐藏的方法
let rm = {};
rm.showRightMenu = function (e, t = 0, l = 0) {
let o = rightMenu;
o.style.cssText = `top: ${t}px; left: ${l}px`;
e ? (o.style.display = "block") : (o.style.display = "none");
};
rm.hideRightMenu = function () {
rm.showRightMenu(!1);
};
let rmWidth = parseInt(rightMenu.style.width);
let rmHeight = parseInt(rightMenu.style.height);
// 定义键盘事件（主要用于屏蔽鼠标右键以及禁止打开开发者工具）
document.onkeydown = () => {
let e = window.event || arguments[0];
//屏蔽F12
if (e.keyCode == 123) {
return false;
//屏蔽Ctrl+Shift+I
} else if (e.ctrlKey && e.shiftKey && e.keyCode == 73) {
return false;
//屏蔽Shift+F10
} else if (e.shiftKey && e.keyCode == 121) {
return false;
}
};
// 鼠标右键按下的事件
window.oncontextmenu = function (e) {
// 阻止默认行为
e.preventDefault();
e = e || window.event;
// 当可视宽度 > 768时显示菜单
if (document.body.clientWidth > 768) {
let t = e.clientY;
let l = e.clientX + 10;
return (
(rmWidth = rmWidth || 155),
(rmHeight = rmHeight || 255),
l + rmWidth > window.innerWidth && (l -= rmWidth + 10),
t + rmHeight > window.innerHeight &&
(t -= t + rmHeight - window.innerHeight),
rm.showRightMenu(!0, t, l),
!1
);
}
};
// 鼠标按下事件（点击除去菜单的其它区域）
document.addEventListener("click", (e) => {
// 如果当前元素或祖先元素中存在rightMenu，则隐藏
if (!e.target.closest("#rightMenu")) {
rightMenu.style.display = "none";
}
});
// 点击菜单操作栏图标的事件
document.getElementById("rightMenuBars").addEventListener("click", (e) => {
const inner = e.target?.className;
switch (inner) {
case "fa fa-chevron-left":
// 向后
history.back();
break;
case "fa fa-chevron-right":
// 向前
history.forward();
break;
case "fa fa-refresh":
// 刷新
window.location.reload();
break;
case "fa fa-chevron-up":
// 回到顶部
// 获取点击时的scrollTop值
let scrollTop = document.documentElement.scrollTop - 0;
let t = setInterval(function () {
// 缓动动画，每次走剩余距离的一半
scrollTop = scrollTop / 2;
// 定义临界值
if (scrollTop <= 5) {
clearInterval(t);
scrollTop = 0;
}
document.documentElement.scrollTop = scrollTop + 0;
}, 16.666);
break;
}
rm.hideRightMenu();
});
// 点击菜单显示栏文字事件
document.getElementById("rightMenuLinks").addEventListener("click", (e) => {
const tag = e.target?.tagName?.toLowerCase();
const inner = e.target?.innerText;
if (tag === "a" || tag === "span" || tag === "i") {
rm.hideRightMenu();
}
switch (inner) {
case "蓝猫图床":
window.open("https://bluecat.likepoems.com");
break;
case "个人云盘":
window.open("https://pan.likepoems.com");
break;
case "接口文档":
window.open("https://api.likepoems.com/");
break;
case "书籍阅读":
window.open("https://reader.likepoems.com/");
break;
}
});
}
};
2、效果演示
