JavaScript 实现 Mac Dock 栏图标放大效果

以下是使用 JavaScript 和 CSS 实现模仿 Mac 系统 Dock 栏鼠标移入后软件图标放大效果的示例代码：

HTML:

<div class='dock'>
  <ul>
    <li>
      <a href='#'>
        <img src='app1.png' alt='App 1'>
      </a>
    </li>
    <li>
      <a href='#'>
        <img src='app2.png' alt='App 2'>
      </a>
    </li>
    <li>
      <a href='#'>
        <img src='app3.png' alt='App 3'>
      </a>
    </li>
    <li>
      <a href='#'>
        <img src='app4.png' alt='App 4'>
      </a>
    </li>
  </ul>
</div>

CSS:

.dock {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  max-width: 1000px;
  margin: 0 auto;
}

.dock ul {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dock li {
  margin: 0 10px;
  transition: transform 0.3s ease;
}

.dock li:hover {
  transform: scale(1.2);
}

.dock img {
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

JavaScript:

// 获取所有应用图标列表项
const appIcons = document.querySelectorAll('.dock li');

// 遍历每个应用图标列表项
appIcons.forEach((icon) => {
  // 监听鼠标移入事件
  icon.addEventListener('mouseover', () => {
    // 添加放大效果
    icon.classList.add('hover');
  });

  // 监听鼠标移出事件
  icon.addEventListener('mouseout', () => {
    // 移除放大效果
    icon.classList.remove('hover');
  });
});

在这个示例中，我们首先使用 CSS 来定义了我们的 Dock 栏样式，包括 Dock 栏的位置、大小和每个应用图标的样式。然后，我们使用 JavaScript 来获取所有应用图标列表项，并为每个图标添加鼠标移入和移出事件监听器。在鼠标移入事件中，我们为图标添加一个类名，该类名在 CSS 中定义了放大效果。在鼠标移出事件中，我们移除该类名以恢复原始大小。这样，当用户将鼠标移入应用图标时，图标将放大并显示为更大的尺寸，当他们将鼠标移出时，图标将恢复到原始大小。