JavaScript 实现 Mac Dock 栏动画效果

以下是使用 JavaScript 实现模仿 Mac 电脑 Dock 栏动画效果的示例代码：

HTML 代码：

<div id='dock'>
  <div class='icon'></div>
  <div class='icon'></div>
  <div class='icon'></div>
  <div class='icon'></div>
  <div class='icon'></div>
</div>

CSS 代码：

#dock {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80%;
  height: 50px;
  background-color: #333;
  border-radius: 25px;
  padding: 10px;
}

.icon {
  width: 50px;
  height: 50px;
  border-radius: 25px;
  background-color: #fff;
  margin: 0 10px;
  opacity: 0.8;
  transition: all 0.3s ease-in-out;
}

.icon:hover {
  opacity: 1;
  transform: translateY(-10px);
}

JavaScript 代码：

const icons = document.querySelectorAll('.icon');

for (let i = 0; i < icons.length; i++) {
  icons[i].addEventListener('mouseover', function() {
    for (let j = 0; j < icons.length; j++) {
      if (j !== i) {
        icons[j].style.opacity = '0.6';
      }
    }
  });
  
  icons[i].addEventListener('mouseout', function() {
    for (let j = 0; j < icons.length; j++) {
      icons[j].style.opacity = '0.8';
    }
  });
}

在这个示例中，我们创建了一个包含五个图标的 Dock 栏，并为每个图标添加了一个鼠标悬停事件监听器。当鼠标悬停在一个图标上时，其他图标会变得更加透明，而鼠标悬停的图标会向上移动一些距离。当鼠标离开图标时，其他图标会恢复透明度。这样可以实现类似于 Mac 电脑 Dock 栏的动画效果。