美化介绍
一个独特而美观的右键菜单映入眼帘，让我不禁驻足欣赏。这个菜单的背景设计尤为引人注目，它采用了带有透明感的背景，同时又融入了一些模糊效果，这种别具一格的视觉设计使得整个菜单在保持清晰的同时，又增添了一份神秘的深度。
作为一位热衷于网站美化的爱好者，我决定尝试复刻这一效果，以美化我自己的Wordpress系统右键菜单。尽管我的技术能力有限，无法完全还原其精妙之处，但我希望通过这次尝试，能够不断提升自己的技能。
最终的效果如截图所示，虽然与原创尚有差距，但已初步展现出了我所追求的美感。我深知自己在这一领域还有很长的路要走，因此诚挚地邀请各位朋友提出宝贵建议。无论是技术上的指导还是审美上的意见，都将是我前进道路上宝贵的财富。同时，我也希望能够得到大家的包容和理解，毕竟探索和学习的道路上难免会有不足之处。
美化截图
[hidecontent type="reply"]
<style type="text/css">
a {
text-decoration: none;
color: inherit;
}
div.usercm {
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(15px) saturate(180%);
-webkit-backdrop-filter: blur(15px) saturate(180%);
font-size: 14px;
width: 160px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
position: absolute;
display: none;
z-index: 10000;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.3);
transition: all 0.3s ease;
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.1),
0 0 0 0px rgba(44, 123, 229, 0); /* 初始状态 */
}
div.usercm:hover {
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.1),
0 0 0 2px rgba(44, 123, 229, 0.5);
}
div.usercm ul {
list-style: none;
margin: 0;
padding: 5px 0;
}
div.usercm ul li {
margin: 0;
padding: 0;
transition: all 0.2s ease;
}
div.usercm ul li a {
color: #555;
padding: 10px 20px;
display: flex;
align-items: center;
transition: all 0.2s ease;
}
div.usercm ul li a i {
width: 20px;
margin-right: 12px;
text-align: center;
color: #666;
}
div.usercm ul li:hover {
background: rgba(100, 149, 237, 0.2);
}
div.usercm ul li a:hover {
color: #2c7be5;
}
div.usercm ul li a:hover i {
color: #2c7be5;
}
div.usercm ul li.divider {
height: 1px;
background: transparent;
border-top: 1px dashed #2c7be5;
margin: 8px 15px;
opacity: 0.6;
}
div.usercm ul li.divider:hover {
opacity: 1;
}
a.disabled {
color: rgba(204, 204, 204, 0.7) !important; /* 半透明禁用状态 */
cursor: not-allowed;
}
a.disabled:hover {
background-color: transparent !important;
}
.quick-nav {
display: flex;
justify-content: space-around;
padding: 10px 10px;
background: transparent; /* 完全透明背景 */
border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* 极细的分隔线 */
margin-bottom: 5px;
}
.quick-nav a {
padding: 8px 12px;
border-radius: 6px;
transition: all 0.25s ease;
color: rgba(85, 85, 85, 0.9); /* 半透明文字 */
font-size: 15px;
background: transparent; /* 透明背景 */
}
.quick-nav a:hover {
background: rgba(100, 149, 237, 0.15); /* 轻微蓝色背景 */
color: #2c7be5; /* 悬停时文字变蓝 */
}
.quick-nav a:active {
background: rgba(100, 149, 237, 0.25); /* 点击时背景加深 */
transform: scale(0.98); /* 轻微缩小效果 */
}
.quick-nav a i {
transition: transform 0.2s ease;
}
.quick-nav a:hover i {
transform: scale(1.1); /* 悬停时图标轻微放大 */
}
.quick-nav a {
position: relative;
}
.quick-nav a::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 6px;
border: 1px solid transparent;
transition: border-color 0.3s ease;
}
.quick-nav a:hover::after {
border-color: rgba(100, 149, 237, 0.3); /* 悬停时显示淡淡边框 */
}
.copy-tooltip {
position: absolute;
background: rgba(0, 0, 0, 0.7);
color: white;
padding: 5px 10px;
border-radius: 4px;
font-size: 12px;
opacity: 0;
transition: opacity 0.3s;
pointer-events: none;
z-index: 10001;
white-space: nowrap;
}
</style>
<div class="usercm" style="display: none;">
<div class="quick-nav">
<a href="javascript:history.go(-1);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="返回上一页"><i class="fa fa-arrow-left"></i></a>
<a href="javascript:history.go(1);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="返回下一页"><i class="fa fa-arrow-right"></i></a>
<a href="javascript:smoothScrollToTop();" rel="external nofollow" rel="external nofollow" title="返回顶部"><i class="fa fa-arrow-up"></i></a>
</div>
<ul>
<li><a href="https://www.xkzhi.cn/frieds"><i class="fa fa-meh-o fa-fw"></i><span>成为邻居</span></a></li>
<li class="divider"></li>
<li><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="getSelect();"><i class="fa fa-copy"></i><span>复制内容</span></a></li>
<li><a href="javascript:window.location.reload();" rel="external nofollow" rel="external nofollow" ><i class="fa fa-refresh fa-fw"></i><span>刷新页面</span></a></li>
<li class="divider"></li>
<li><a href="https://www.xkzhi.cn/"><i class="fa fa-home"></i><span>返回首页</span></a></li>
<li><a href="javascript:history.go(1);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><i class="fa fa-arrow-right"></i><span>前进</span></a></li>
<li><a href="javascript:history.go(-1);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><i class="fa fa-arrow-left"></i><span>后退</span></a></li>
<li class="divider"></li>
<li><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="copyPageUrl();"><i class="fa fa-link"></i><span>复制地址</span></a></li>
<li><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="baiduSearch();"><i class="fa fa-search"></i><span>搜索选中内容</span></a></li>
</ul>
</div>
<script type="text/javascript">
//顶部
let scrollAnimationId = null;
function smoothScrollToTop() {
if (scrollAnimationId) {
cancelAnimationFrame(scrollAnimationId);
}
const startPosition = window.pageYOffset;
const startTime = performance.now();
const duration = 800; // 动画持续时间(ms)
const animateScroll = (currentTime) => {
const elapsed = currentTime - startTime;
const progress = Math.min(elapsed / duration, 1);
const easeProgress = easeOutCubic(progress);
window.scrollTo(0, startPosition * (1 - easeProgress));
if (progress < 1) {
scrollAnimationId = requestAnimationFrame(animateScroll);
} else {
scrollAnimationId = null;
}
};
function easeOutCubic(t) {
return (--t) * t * t + 1;
}
const handleUserScroll = () => {
if (scrollAnimationId) {
cancelAnimationFrame(scrollAnimationId);
scrollAnimationId = null;
window.removeEventListener('wheel', handleUserScroll);
window.removeEventListener('touchmove', handleUserScroll);
}
};
window.addEventListener('wheel', handleUserScroll, { passive: true });
window.addEventListener('touchmove', handleUserScroll, { passive: true });
scrollAnimationId = requestAnimationFrame(animateScroll);
}
(function(a) {
a.extend({
mouseMoveShow: function(b) {
var d = 0,
c = 0,
h = 0,
k = 0,
e = 0,
f = 0;
var menu = a(b);
var isMenuShowing = false;
var isOnImage = false;
var imageUrl = '';
var tooltip = $('<div class="copy-tooltip">复制成功</div>').css({
'position': 'absolute',
'background': 'rgba(0,0,0,0.7)',
'color': 'white',
'padding': '5px 10px',
'border-radius': '4px',
'font-size': '12px',
'opacity': '0',
'transition': 'opacity 0.3s',
'pointer-events': 'none',
'z-index': '10001'
}).appendTo('body');
menu.css({
'transition': 'left 0.3s ease, top 0.3s ease'
});
function checkIfOnImage(target) {
var imgElement = target.closest('img');
if (imgElement) {
isOnImage = true;
imageUrl = imgElement.src;
// 修改"成为邻居"为"复制图片链接"
menu.find('a[href="https://www.xkzhi.cn/frieds"] i')
.removeClass('fa-meh-o')
.addClass('fa-link');
menu.find('a[href="https://www.xkzhi.cn/frieds"] span')
.text('复制此图片');
} else {
isOnImage = false;
imageUrl = '';
// 恢复"成为邻居"
menu.find('a[href="https://www.xkzhi.cn/frieds"] i')
.removeClass('fa-link')
.addClass('fa-meh-o');
menu.find('a[href="https://www.xkzhi.cn/frieds"] span')
.text('成为邻居');
}
}
// 复制图片链接函数
function copyImageUrl() {
if (!isOnImage || !imageUrl) return false;
try {
var tempInput = document.createElement('input');
tempInput.value = imageUrl;
document.body.appendChild(tempInput);
tempInput.select();
var success = document.execCommand('copy');
document.body.removeChild(tempInput);
if (success) {
// 显示提示框
var menuPos = menu.offset();
tooltip.css({
'left': menuPos.left + menu.outerWidth() + 10,
'top': menuPos.top
}).stop().css('opacity', 1)
.delay(1500)
.animate({opacity: 0}, 500);
return true;
} else {
throw new Error('复制失败');
}
} catch (err) {
tooltip.text('复制失败').css({
'background': 'rgba(255,0,0,0.7)',
'left': menu.offset().left + menu.outerWidth() + 10,
'top': menu.offset().top
}).stop().css('opacity', 1)
.delay(1500)
.animate({opacity: 0}, 500);
return false;
}
}
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 + menu.width() >= d && (e = e - menu.width() - 5);
k + menu.height() >= c && (f = f - menu.height() - 5);
a("html").on({
contextmenu: function(c) {
if (3 == c.which) {
checkIfOnImage(c.target);
if (isMenuShowing) {
menu.css({
left: e,
top: f
});
} else {
menu.css({
left: e,
top: f
}).show();
isMenuShowing = true;
}
c.preventDefault(); // 阻止默认右键菜单
}
},
click: function() {
menu.hide();
isMenuShowing = false;
}
});
});
menu.on('click', 'a[href="https://www.xkzhi.cn/frieds"]', function(e) {
if (isOnImage && imageUrl) {
e.preventDefault();
copyImageUrl();
menu.hide();
isMenuShowing = false;
}
});
a(window).scroll(function() {
menu.hide();
isMenuShowing = false;
});
},
disabledContextMenu: function() {
window.oncontextmenu = function() {
return !1
}
}
})
})(jQuery);
function getSelect() {
"" == (window.getSelection ? window.getSelection() : document.selection.createRange().text) ? layer.msg("请先选择要复制的内容！") : document.execCommand("Copy")
}
function baiduSearch() {
var a = window.getSelection ? window.getSelection() : document.selection.createRange().text;
"" == a ? layer.msg("请先选择要搜索的内容！") : window.open("https://www.xkzhi.cn/?s=" + a)
}
$(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())
});
// 复制当前页面地址函数
function copyPageUrl() {
try {
var tempInput = document.createElement('input');
tempInput.value = window.location.href;
document.body.appendChild(tempInput);
tempInput.select();
var success = document.execCommand('copy');
document.body.removeChild(tempInput);
if (success) {
// 显示提示框
var menu = $('.usercm');
var tooltip = $('.copy-tooltip').text('已复制页面地址');
var menuPos = menu.offset();
tooltip.css({
'left': menuPos.left + menu.outerWidth() + 10,
'top': menuPos.top
}).stop().css('opacity', 1)
.delay(1500)
.animate({opacity: 0}, 500);
return true;
} else {
throw new Error('复制失败');
}
} catch (err) {
$('.copy-tooltip').text('复制失败').css({
'background': 'rgba(255,0,0,0.7)',
'left': $('.usercm').offset().left + $('.usercm').outerWidth() + 10,
'top': $('.usercm').offset().top
}).stop().css('opacity', 1)
.delay(1500)
.animate({opacity: 0}, 500);
return false;
}
}
</script>
