杰克-逊の黑豹，恰饭啦 [](￣▽￣)

前言

自打接触了mackBook以后，就对它的dock栏非常着迷，它非常有趣。在前期使用ubuntu的时候，就在网上搜罗了很多路子，将dock栏美化成macOS上的样子。样子很像，但意犹未尽。我就想，能不能用前端技术在网页上实现呢？

不好意思地讲，之前我真抽出一部分时间实现，但半途而废，效果不佳。说来也怪，人的思维就是这个德行，当你想全心全意做出某些东西的时候，就容易卡壳，钻牛角尖，不得要领。当你快把这个事情忘了的时候，你重新拾起来，却很神奇地做到了。可能这就是潜意识的功效？

我很少写一些这种模仿xxx效果的东西，但这一次是我非常喜欢的dock栏，还是值得记录一下。

效果

大致地模拟了一下，圆角什么的都是凭感觉设置的，马马虎虎，算是说的过去吧。

以前的实现思路

作为比较，先说一下以前的实现思路，没错，就是那个非常蠢的思路。

黑色方块和深灰色背景容器，它们的大小都用js操作style去控制，使用js、配合相关鼠标事件，跟踪鼠标的位置，然后根据位置，推算出目标黑方块，然后对方块和容器背景做放缩设置。

这种想法很直观，但是编写跟踪鼠标位置的代码时，我写着写着就搞乱了，要计算出每个要素的宽高和位置，效果一点都不好看，然后就放弃了。现在想来，那时候放弃是正确的，否则宝贵的时间就被我浪费掉了，哈哈哈。

现在的实现

现在的实现思路，是走css+js的路线，黑色方块和深灰色背景容器都使用css完成缩放，包括黑色方块下的白色小圆点也是，js的代码只需要配合黑色方块的鼠标事件，确定当前鼠标到底在哪个黑色小方块上面即可，具体实现的代码如下。

html 复制代码

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./main.css" >
  </head>

  <body>
    <script src="./main.js" defer></script>
    <div class="container">
      <div class="app-container">
        <div class="app"></div>
      </div>
      <div class="app-container">
        <div class="app"></div>
      </div>
      <div class="app-container">
        <div class="app"></div>
      </div>
      <div class="app-container">
        <div class="app"></div>
      </div>
      <div class="app-container">
        <div class="app"></div>
      </div>
      <div class="app-container">
        <div class="app"></div>
      </div>
      <div class="app-container">
        <div class="app"></div>
      </div>
    </div>
  </body>
</html>

js 复制代码

// main.js

const apps = document.getElementsByClassName("app");
const activateRecord = new Array(apps.length).fill(false);

for (let i = 0; i < apps.length; i++) {
  const app = apps[i];
  
  // macOS dock栏中，如果鼠标离开app图标，但是鼠标所在的垂直线
  // 没离开app图标，app图标是不会缩小到原来的，本着这个细节，在
  // app外层套入"app-container"，然后监听它的 "mouseover"事件
  app.parentElement.addEventListener("mouseover", () => {
    const index = i;
    app.className = "app main-effect";
    
    // 只是简单模拟一方放缩效果，就引入了3级放大效果，
    // 实际上，随着黑色方块的数量增加，放大效果也是
    // 需要调整的，比如调整到4级放大效果等等。
    
    if (index === 0) {
      // 鼠标悬浮在最左侧黑色方块上
      apps[1].className = "app second-effect";
      apps[2].className = "app third-effect";
    } else if (index === apps.length - 1) {
      // 鼠标悬浮在最右侧黑色方块上
      apps[index-1].className = "app second-effect";
      apps[index-2].className = "app third-effect";
    } else {
      apps[index-1].className = "app second-effect";
      apps[index+1].className = "app second-effect";

      if (index-2 > -1) {
        apps[index-2].className = "app third-effect";
      }

      if (index + 2 < apps.length) {
        apps[index+2].className = "app third-effect";
      }
    }
  })

  app.parentElement.addEventListener("mouseout", () => {
    // 要把所有的黑色方块都恢复原状，不能只恢复当前的，
    // 因为当前应用了main-effect效果，而它旁边的黑色
    // 方块应用了 second-effect third-effect效果，
    // 也要将它们恢复。
    // 此处恢复比较粗旷，把所有都恢复了
    for (const app of apps) {
      app.className = "app";
    }
  })


  app.addEventListener("click", () => {
    const index = i;
    
    // 已经点击过的黑色方块，就不用再处理了
    if (!activateRecord[index]) {
      activateRecord[index] = true;
      app.parentElement.className = "app-container activate";
      app.className = "app main-effect animation-once";
    }
  })
}

scss 复制代码

// main.scss

// 如果你要运行的话，请将 main.scss 编译为 main.css，
// html中只认 main.css

.container {
  position: relative;
  top: 100px;
  display: flex;
  gap: 2px;
  align-items: center;
  // 根据容器内的内容由浏览器计算适当的宽度，
  // 避免占据一整行屏幕的宽度
  width:fit-content;
  height: 50px;
  padding: 4px;
  background: rgba(44, 43, 43, 0.3);
  border: 1px solid transparent;
  border-radius: 12px;
  // 实现深灰色背景的毛边玻璃效果
  backdrop-filter: blur(8px);
  transition: all .5s;

  
  .app-container {
    position: relative;
    height: 60px;
    display: flex;
    align-items: center;
  }

  // 白色圆点
  .activate::after {
    content: "";
    display: block;
    border: 2px solid white;
    border-radius: 50%;
    width: 0;
    height: 0;
    position: absolute;
    bottom: 2px;
    color: white;
    left: 50%;
  }

  .app {
    width: 40px;
    height: 40px;
    border: 1px solid;
    border-radius: 10px;
    background-color: black;
    transition: all .5s;
  }

  // 主放大效果
  .main-effect {
    width: 80px;
    height: 80px;
    transform: translateY(-40px);
  }

  // 次放大效果
  .second-effect {
    width: 60px;
    height: 60px;
    transform: translateY(-20px);
  }

  // 最次放大效果
  .third-effect {
    width: 50px;
    height: 50px;
    transform: translateY(-10px);
  }

  @keyframes jump {
    from {
      transform: translateY(-40px);
    }

    50% {
      transform: translateY(-60px);
    }

    to {
      transform: translateY(-40px);
    }
  }

  // 点击后黑色方块跳动效果
  .animation-once {
    animation: 1s jump ease-out;
  }
}

改进的地方

整体上看没什么大毛病，不过在深灰色背景容器的宽度控制上，是交给浏览器去处理的，这个地方我想可以用js计算一下黑色方块的宽度和，然后再设置css的transform实现。

结束语

完成此文，也算了了自己一块儿心病吧，哈哈哈，代码不难，但是可以赋予自身一些快乐，将脑海里的想法描绘出来，amazing!

对了，如果你好奇上边的动态图是如何实现的话，也灰常简单，用个录屏软件录制某个区域，然后用ffmpeg将mp4转换成gif即可，简单暴力：ffmpeg -i demo.mp4 -ss 00:00:00 -t 00:00:23 demo.gif.

-ss 指定视频开始时刻，-t指定视频持续时间，那么这段时长的视频内容就会转为gif

简单搞个macOS dock栏吧

杰克-逊の黑豹，恰饭啦 [](￣▽￣)

前言

效果

以前的实现思路

现在的实现

改进的地方

结束语