JS实现仿Windows7风格的网页右键菜单效果代码

下面是详细讲解如何实现“JS实现仿Windows7风格的网页右键菜单效果代码”的完整攻略。

1. 前言

仿Windows7风格的网页右键菜单效果代码分为两部分，一部分是CSS样式，另一部分是JS代码。CSS负责绘制菜单的样式和动画效果，JS负责处理菜单的逻辑和交互。

2. 实现步骤

2.1 HTML

首先，我们需要在HTML中创建一个菜单容器，如下所示：

<div class="context-menu-container">
  <ul class="context-menu">
    <li><a href="#">菜单项1</a></li>
    <li><a href="#">菜单项2</a></li>
    <li><a href="#">菜单项3</a></li>
  </ul>
</div>

2.2 CSS

接下来，我们需要用CSS来定义菜单的样式和动画效果。以下是一个基本的样式定义：

.context-menu-container {
  position: absolute;
  left: -9999px;
}

.context-menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 3px;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.15);
}

.context-menu li {
  margin: 0;
  padding: 0;
}

.context-menu li a {
  display: block;
  padding: 8px 16px;
  text-decoration: none;
  color: #333;
}

.context-menu li a:hover {
  background-color: #f5f5f5;
}

.context-menu.slide-in {
  animation: slide-in .2s ease-out;
}

.context-menu.slide-out {
  animation: slide-out .2s ease-in;
}

@keyframes slide-in {
  0% { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes slide-out {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.8); opacity: 0; }
}

以上样式代码中，我们定义了菜单的容器样式.context-menu-container，菜单的样式.context-menu以及菜单项的样式.context-menu li a。我们还定义了两个动画效果.slide-in和.slide-out，用于实现菜单的滑入和滑出动画效果。

2.3 JS

接下来，我们需要使用JS来处理菜单的逻辑和交互。以下是实现菜单的JS代码：

// 获取菜单容器和菜单
const contextMenuContainer = document.querySelector('.context-menu-container')
const contextMenu = document.querySelector('.context-menu')

// 禁用默认右键菜单
document.addEventListener('contextmenu', event => {
  event.preventDefault()
})

// 鼠标按下事件
document.addEventListener('mousedown', event => {
  if (event.button === 2) { // 右键按下
    showContextMenu(event.clientX, event.clientY)
  } else {
    hideContextMenu()
  }
})

// 显示菜单
function showContextMenu(x, y) {
  contextMenuContainer.style.left = `${x}px`
  contextMenuContainer.style.top = `${y}px`
  contextMenu.classList.add('slide-in')
}

// 隐藏菜单
function hideContextMenu() {
  contextMenu.classList.remove('slide-in')
  contextMenu.classList.add('slide-out')
  setTimeout(() => {
    contextMenuContainer.style.left = '-9999px'
    contextMenuContainer.style.top = '-9999px'
    contextMenu.classList.remove('slide-out')
  }, 200)
}

以上代码中，我们首先获取了菜单容器和菜单元素。然后，我们禁用了默认的右键菜单事件，并为鼠标按下事件添加了逻辑判断，当按下鼠标右键时显示菜单，当按下鼠标左键时隐藏菜单。

在显示菜单的函数showContextMenu()中，我们设置了菜单容器的位置和菜单元素的动画效果。在隐藏菜单的函数hideContextMenu()中，我们将菜单元素的动画效果添加和移除，并延迟200毫秒后隐藏菜单并将菜单容器的位置设置为远离可视区域的位置。

2.4 示例说明

以下是两个示例，并展示了如何在示例中添加相应的JS与CSS代码。

示例1：在图片上右键菜单

在这个示例中，我们将在页面上的图片上添加一个右键菜单。

首先，在HTML中添加图片元素以及菜单容器和菜单项：

<img src="image.jpg" class="image" alt="图片">
<div class="context-menu-container">
  <ul class="context-menu">
    <li><a href="#">打开图片</a></li>
    <li><a href="#">另存为...</a></li>
  </ul>
</div>

然后，在CSS中为菜单容器和菜单添加样式：

.image {
  max-width: 100%;
}

.context-menu-container {
  position: absolute;
  left: -9999px;
}

.context-menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 3px;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.15);
}

.context-menu li {
  margin: 0;
  padding: 0;
}

.context-menu li a {
  display: block;
  padding: 8px 16px;
  text-decoration: none;
  color: #333;
}

.context-menu li a:hover {
  background-color: #f5f5f5;
}

.context-menu.slide-in {
  animation: slide-in .2s ease-out;
}

.context-menu.slide-out {
  animation: slide-out .2s ease-in;
}

@keyframes slide-in {
  0% { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes slide-out {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.8); opacity: 0; }
}

最后，在JS中添加菜单的交互逻辑：

// 获取菜单容器和菜单
const contextMenuContainer = document.querySelector('.context-menu-container')
const contextMenu = document.querySelector('.context-menu')
const image = document.querySelector('.image')

// 禁用默认右键菜单
document.addEventListener('contextmenu', event => {
  event.preventDefault()
})

// 鼠标按下事件
image.addEventListener('mousedown', event => {
  if (event.button === 2) { // 右键按下
    showContextMenu(event.clientX, event.clientY)
  } else {
    hideContextMenu()
  }
})

// 显示菜单
function showContextMenu(x, y) {
  contextMenuContainer.style.left = `${x}px`
  contextMenuContainer.style.top = `${y}px`
  contextMenu.classList.add('slide-in')
}

// 隐藏菜单
function hideContextMenu() {
  contextMenu.classList.remove('slide-in')
  contextMenu.classList.add('slide-out')
  setTimeout(() => {
    contextMenuContainer.style.left = '-9999px'
    contextMenuContainer.style.top = '-9999px'
    contextMenu.classList.remove('slide-out')
  }, 200)
}

示例2：在表格中右键菜单

在这个示例中，我们将在页面上的表格中添加一个右键菜单。

首先，在HTML中添加表格元素以及菜单容器和菜单项：

<table class="table">
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
    <td>单元格3</td>
  </tr>
  <tr>
    <td>单元格4</td>
    <td>单元格5</td>
    <td>单元格6</td>
  </tr>
</table>
<div class="context-menu-container">
  <ul class="context-menu">
    <li><a href="#">复制</a></li>
    <li><a href="#">剪切</a></li>
    <li><a href="#">粘贴</a></li>
  </ul>
</div>