JavaScript 实现模仿 Mac Dock 栏鼠标悬停放大效果

这是一个简单的实现示例，你可以根据自己的需要进行修改和优化。

HTML 代码：

<div id='dock'>
  <div class='item'>
    <img src='icon1.png'>
  </div>
  <div class='item'>
    <img src='icon2.png'>
  </div>
  <div class='item'>
    <img src='icon3.png'>
  </div>
  <div class='item'>
    <img src='icon4.png'>
  </div>
</div>

CSS 代码：

#dock {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.item {
  margin: 0 20px;
  transition: all 0.2s ease-in-out;
}

.item:hover {
  transform: scale(1.2);
}

JavaScript 代码：

// 获取所有的dock栏item
var items = document.querySelectorAll('#dock .item');

// 遍历每个item，监听鼠标移入事件
for (var i = 0; i < items.length; i++) {
  items[i].addEventListener('mouseenter', function() {
    // 将当前item的z-index设为最高，使其在其他item之上
    this.style.zIndex = 100;
  });

  // 监听鼠标移出事件
  items[i].addEventListener('mouseleave', function() {
    // 将当前item的z-index设为默认值，使其回到原来的层级
    this.style.zIndex = 'auto';
  });
}

这样，当鼠标移入一个item时，它会放大并置于其他item之上，移出时则回到原来的大小和层级。你可以根据需要修改CSS样式和JavaScript代码来实现更多的效果。