B站首页的 Banner 这么好看，我用原生 JS + 三大框架统统给你复刻一遍！

写在前面

我最开始是用 Angular 去实现了B站的 Banner ，那时候还没有人做这东西，可以看到第一个图是好几年以前的了。然后随着逐步完善，在这几年偶尔也看到有人发过这东西的实现方法。

但我为什么要写这篇文章？因为我打算用原生 JS 和三大框架都去实现一遍，以满足所有人的需求。而且我作为几乎每一期都 copy 的玩家，存货多，也知道最简单的 copy 方法。

本文的原生 JS 代码我直接从我已经完善的 Angular 代码基础上提取出来，主要讲讲我大致的方法原理，里面的具体实现细节就不讲了，毕竟讲起来费劲，主要就是一些根据鼠标移动计算图片位置，自己认真读起来不会很难。

代码与相关静态资源已提交至 gitee ，需要的直接去看完整代码即可。

gitee.com/CrimsonHu/b...

我们打开控制台，首先找到它的 DOM 结构，可以看到 Banner 里面有一个个 class 为 layer 的 div：

点开 div，会看到一个 img 与控制这个 img 位置与大小的样式：

Banner 的本质就是一层层的图片，按照特定的宽度、高度、位置（ translate 的 X 与 Y 属性）、以及角度、缩放、透明度这些来进行排列的。

在 Banner 上移动鼠标，我们会发现 transform 属性的各项值会随着鼠标的移动而更新：

所以实现思路就有了：把这些图片按照指定的样式进行排列，然后做一个鼠标移动的监听事件即可。

那么如何知道鼠标移动了一定的距离，每个图片各自的移动量是多少呢？

这个也简单。因为它的移动量基本都是线性的。目前我只看到有两期是在线性移动的基础上加了点额外的效果，这个在这里就把它忽略。把它的线性动画的移动量拿过来后已经显示的很不错了。

于是我发现了一个很好用的方法：

以某一张图片为基准，以它的移动量为一个基准单位，去看其它每个图片移动了多少。

例如，我以图片 A 移动了 5px 为基准，那么我就看图片 A 移动了 5px 的时候，其它的各个图片分别移动了多少。所以，通过这个取基准的方法，我们可以得出，根据鼠标的移动，带动图片 A 的位置更新，从而得出其它各个图片的位置的更新值。

使用原生代码实现

1. 资源获取

现在理清了原理，那么我们就先将每张图片的静态资源获取下来，这一步就省略不写了。

2. 定义基准移动量

现在我们以第一张图片为基准，去定义移动量：

js 复制代码

{ 
    type: 'image', 
    file: '[email protected]', 
    width: 1728, 
    height: 162, 
    x: 0,  // 原始 translateX 值
    y: 0,  // 原始 translateY 值
    r: 0,  // 原始 rotate 值
    s: 1,  // 原始 scale 值 
    o: 1,  // 原始 opacity 值 
    newX: -1.17573, // 更新后的 translateX 值
    newY: 0,        // 更新后的 translateY 值
    newRotate: 0,   // 更新后的 rotate 值
    bench: -1.17573 
},

其实没更新的值可以省略不写，比如这段定义里面的 newOpacity 我省略了，而且 newY 和 newRotate 也可以省略，因为后续代码我会处理省略的字段不进行计算更新。

这段定义代码需要注意的地方就是 x、 newX、 bench 这三个，这是我们定义的一个基准移动量。

鼠标在 Banner 上移动，这个图片的 translateX 值从 0 更新到 -1.17573，以此为基准，基准字段记为 bench。

于是，需要你花亿点点时间，去看第一个图片的 translateX 在 -1.17573 这个值的时候，其它的图片的位置值各自是多少：

因为每次重新打开页面重新打开控制台时，这种细微操作的移动，更新的值都不会完全一致，图中的值会与我记录的稍微不一致，所以在完成所有图片的数据采集之前不要更改窗口尺寸与开关控制台。

js 复制代码

[
    { type: 'image', file: '[email protected]', width: 1728, height: 162, x: 0, y: 0, r: 0, s: 1, o: 1, newX: -1.17573, newY: 0, newRotate: 0, bench: -1.17573 },
    { type: 'image', file: '[email protected]', width: 1632, height: 153, x: -42.5, y: 0, r: 0, s: 1, o: 1, newX: -46.2014, newY: 1.48055, newRotate: -2.17727, bench: -1.17573 },
    { type: 'image', file: '[email protected]', width: 1632, height: 153, x: 0, y: 0, r: 0, s: 1, o: 1, newX: 0, newY: 0, newRotate: 0, bench: -1.17573 },
    { type: 'image', file: '[email protected]', width: 1728, height: 162, x: -63, y: -18, r: 0, s: 1, o: 1, newX: -68.8786, newY: -18, newRotate: -2.17727, bench: -1.17573 },
    { type: 'image', file: '[email protected]', width: 1632, height: 153, x: 0, y: 0, r: 0, s: 1, o: 1, newX: 3.70136, newY: 0, newRotate: 0, bench: -1.17573 },
    { type: 'image', file: '[email protected]', width: 1824, height: 171, x: 9.5, y: 0, r: 0, s: 1, o: 1, newX: -0.842045, newY: -2.06841, newRotate: 0, newScale: 0.978227, bench: -1.17573 },
    { type: 'image', file: '[email protected]', width: 1632, height: 153, x: 0, y: 0, r: 0, s: 1, o: 1, newX: 14.8055, newY: 0, newRotate: 0, bench: -1.17573 },
    { type: 'image', file: '[email protected]', width: 1632, height: 153, x: 0, y: 8.5, r: 0, s: 1, o: 1, newX: 5.55205, newY: 7.38959, newRotate: 0, bench: -1.17573 },
    { type: 'image', file: '[email protected]', width: 1632, height: 153, x: 8.5, y: 0, r: 0, s: 1, o: 1, newX: -2.60409, newY: 0, newRotate: 0, bench: -1.17573 },
    { type: 'image', file: '[email protected]', width: 1632, height: 153, x: 8.5, y: 0, r: 0, s: 1, o: 1, newX: 15.9027, newY: -12.9548, newRotate: 0, bench: -1.17573 },
    { type: 'image', file: '[email protected]', width: 1632, height: 153, x: 17, y: 0, r: 0, s: 1, o: 1, newX: 11.448, newY: 0, newRotate: 0, bench: -1.17573 },
    { type: 'image', file: '[email protected]', width: 1632, height: 153, x: 8.5, y: 0, r: 0, s: 1, o: 1, newX: 1.09727, newY: 0, newRotate: 0, bench: -1.17573 },
    { type: 'image', file: '[email protected]', width: 1344, height: 126, x: 21, y: 21, r: 0, s: 1, o: 1, newX: -9.48182, newY: 17.9518, newRotate: 2.17727, newScale: 1.13064, bench: -1.17573 },
    { type: 'image', file: '[email protected]', width: 1632, height: 153, x: 0, y: 0, r: 0, s: 1, o: 1, newX: -18.5068, newY: 0, newRotate: 0, bench: -1.17573 },
    { type: 'image', file: '[email protected]', width: 1632, height: 153, x: 0, y: 17, r: 0, s: 1, o: 1, newX: -5.55205, newY: 18.8507, newRotate: 0, bench: -1.17573 },
    { type: 'image', file: '[email protected]', width: 1632, height: 153, x: 0, y: 0, r: 0, s: 1, o: 1, newX: -7.40273, newY: -2.96109, newRotate: 0, newScale: 1.08709, bench: -1.17573 },
    { type: 'image', file: '[email protected]', width: 1651.2, height: 154.8, x: 34.4, y: 0, r: 0, s: 1, o: 1, newX: 11.9305, newY: 0, newRotate: 0, bench: -1.17573 },
    { type: 'image', file: '[email protected]', width: 1632, height: 153, x: 0, y: 0, r: 0, s: 1, o: 1, newX: -9.25341, newY: 6.29232, newRotate: -8.70909, newScale: 1.13064, bench: -1.17573 },
    { type: 'image', file: '[email protected]', width: 1632, height: 153, x: 17, y: 0, r: 0, s: 1, o: 1, newX: -12.6109, newY: 0, newRotate: 0, bench: -1.17573 },
    { type: 'image', file: '[email protected]', width: 1920, height: 180, x: 30, y: 0, r: 0, s: 1, o: 1, newX: 73.5455, newY: 0, newRotate: 0, bench: -1.17573 },
    { type: 'image', file: '[email protected]', width: 1632, height: 153, x: 15.3, y: 17, r: 0, s: 1, o: 1, newX: -18.0123, newY: 17, newRotate: 0, bench: -1.17573 },
    { type: 'image', file: '[email protected]', width: 1920, height: 180, x: 0, y: 0, r: 0, s: 1, o: 1, newX: -43.5455, newY: 0, newRotate: 0, bench: -1.17573 },
]

3. 展示静态效果

有了这些数据后，先来把每个图层的图片按照这些位置数据显示出来，用原生 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>
    <style>
        .bili-banner {
            position: relative;
            width: 100%;
            height: 100%;
            background-color: #f9f9f9;
            display: flex;
            justify-content: center;
            background-repeat: no-repeat;
            background-position: center 0;
            background-size: cover;
            filter: brightness(var(--img-filter-brightness));
        }

        .animated-banner {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            overflow: hidden;
        }

        .layer {
            position: absolute;
            height: 100%;
            width: 100%;
            left: 0;
            top: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .logo {
            position: absolute;
            width: 220px;
            height: 105px;
            left: 0;
            top: 0;
            transform: scale(0.4) translate(-60%, -60%);
        }

        .logo>img {
            width: 100%;
            height: 100%;
        }

        .banner-container {
            position: relative;
            width: 800px;
            height: 150px;
        }
    </style>
</head>

<body>
    <div class="banner-container" id="winter-5"> </div>
</body>

<script>
    const baseSrc = './assets/winter-5/';

    const imgData = [...];

    const container = document.getElementById('winter-5');

    const biliBanner = document.createElement('div');
    biliBanner.className = 'bili-banner';

    const animatedBanner = document.createElement('div');
    animatedBanner.className = 'animated-banner';

    for (let i = 0; i < imgData.length; i++) {
        const layer = document.createElement('div');
        layer.className = 'layer';
        const img = document.createElement('img');
        img.src = baseSrc + imgData[i].file;
        img.style.width = imgData[i].width + 'px';
        img.style.height = imgData[i].height + 'px';
        img.style.transform = '' +
            'translate(' +
            imgData[i].x + 'px, ' +
            imgData[i].y + 'px' +
            ')' + ' ' +
            'rotate(' + imgData[i].r + 'deg)' + ' ' +
            'scale(' + imgData[i].s + ')';
        img.style.opacity = imgData[i].o;
        layer.appendChild(img);
        animatedBanner.appendChild(layer);
    }

    biliBanner.appendChild(animatedBanner);
    container.appendChild(biliBanner);

</script>

</html>

上述代码的效果如图所示：

4. 实现完整功能

现在能够看到每张图片能够按照正确的位置显示出来了，接下来的主要工作就是添加鼠标移动事件，去计算每个图片的移动量。具体就不详细讲了。

可以看到，已经基本达到了B站首页 Banner 的效果。

使用三大框架各自实现的代码直接在 gitee 上看，文中就不贴出来了。