jQuery鼠标右键菜单特效

ziblog

已于 2025-06-27 15:06:04 修改

阅读量828

点赞数 19

CC 4.0 BY-SA版权

文章标签：鼠标

于 2025-05-09 17:59:29 首次发布

本文链接：https://blog.youkuaiyun.com/zichenblog/article/details/147834591

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery鼠标右键菜单特效</title>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<style>
body {
font-family: 'Microsoft YaHei', sans-serif;
background-color: #f5f5f5;
padding: 20px;
text-align: center;
}

#content {
background-color: white;
padding: 50px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
margin: 20px auto;
max-width: 800px;
min-height: 300px;
}

#custom-menu {
display: none;
position: absolute;
width: 200px;
background: white;
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
border-radius: 3px;
overflow: hidden;
z-index: 9999;
}

#custom-menu ul {
list-style: none;
margin: 0;
padding: 0;
}

#custom-menu li {
padding: 10px 15px;
cursor: pointer;
border-bottom: 1px solid #eee;
transition: background 0.3s;
}

#custom-menu li:last-child {
border-bottom: none;
}

#custom-menu li:hover {
background: #f0f0f0;
}

.menu-icon {
margin-right: 10px;
color: #666;
}

.menu-divider {
height: 1px;
background: #eee;
margin: 5px 0;
}

h1 {
color: #333;
}

p {
color: #666;
line-height: 1.6;
}

a {
color: #0066cc;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<h1>jQuery鼠标右键菜单特效演示</h1>
<p>在下方内容区域点击鼠标右键，查看自定义右键菜单效果。</p>

<div id="content">
<p>这是一个演示区域。您可以在这里点击鼠标右键来触发自定义菜单。</p>
<p>这个特效使用jQuery实现，完全自定义右键菜单样式和功能。</p>
</div>

<div id="custom-menu">
<ul>
<li><span class="menu-icon">📄</span> 新建</li>
<li><span class="menu-icon">📂</span> 打开</li>
<li><span class="menu-icon">💾</span> 保存</li>
<div class="menu-divider"></div>
<li><span class="menu-icon">✂️</span> 剪切</li>
<li><span class="menu-icon">📋</span> 复制</li>
<li><span class="menu-icon">📎</span> 粘贴</li>
<div class="menu-divider"></div>
<li><span class="menu-icon">🔍</span> 搜索</li>
<li><span class="menu-icon">🖨️</span> 打印</li>
<div class="menu-divider"></div>
<li><span class="menu-icon">❓</span> 帮助</li>
<li><span class="menu-icon">🚪</span> 退出</li>
</ul>
</div>

<script>
$(document).ready(function() {
// 禁用默认右键菜单
$(document).on("contextmenu", function(e) {
e.preventDefault();
});

// 在内容区域右键时显示自定义菜单
$("#content").on("contextmenu", function(e) {
e.preventDefault();

// 获取鼠标位置
var mouseX = e.pageX;
var mouseY = e.pageY;

// 显示菜单
$("#custom-menu").css({
"left": mouseX + "px",
"top": mouseY + "px",
"display": "block"
});

// 点击菜单项时
$("#custom-menu li").on("click", function() {
var action = $(this).text().trim();
alert("您选择了: " + action);
$("#custom-menu").hide();
});
});

// 点击其他地方时隐藏菜单
$(document).on("click", function() {
$("#custom-menu").hide();
});

// 防止点击菜单时触发document的click事件
$("#custom-menu").on("click", function(e) {
e.stopPropagation();
});
});
</script>
</body>
</html>