JavaScript练手小技巧：仿米哈游官网人物跟随鼠标位移效果

最近，有同学找到我，说：老师，我想模仿米哈游官网。

我说：可以，很不错的。

她说：有些效果有点难，能不能帮我看下。

于是，我就简单大概粗糙的讲解了下大致的原理，毕竟米哈游官网不是那么好仿的。

今天，太累了，就突然想到这个，就模仿其中一个效果来做做。

代码已经挂在gitee 上了。（话说，我让大家把作业挂上gitee，但是总有那么几个同学不做，哎）

源码地址：my-practice: 我自己的练习仓库，仅供学习使用。 - Gitee.com

预览地址：仿米哈游官网人物跟随鼠标位移效果

一、HTML

 <div class="wrapper" id="wrapper">
        <div class="imgs" id="imgs">
            <img src="images/1.png" alt="">
            <img src="images/2.png" alt="">
            <img src="images/3.png" alt="">
        </div>
        <div class="text">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi reiciendis nesciunt minus, vel quibusdam quidem numquam pariatur, obcaecati voluptatem, nostrum quaerat eum sint omnis amet. Soluta quam explicabo nemo harum eveniet aperiam reiciendis beatae quia, ipsum dignissimos. Porro eaque velit delectus, in atque, ullam sequi itaque molestiae enim ab laudantium quis quo aliquid beatae omnis distinctio. Nobis amet eveniet assumenda accusamus totam voluptate praesentium. Sunt ducimus voluptates, nam, sit dolore corrupti obcaecati saepe consectetur voluptate corporis fugiat? Excepturi aperiam tempore dicta odit ratione accusamus suscipit ut quam odio, ducimus facilis aspernatur nisi laboriosam dolor reiciendis nulla assumenda, qui dolores. Sequi?
        </div>
    </div>

一个大 wrapper 把整个内容套起来。

这个 wrapper 会跟鼠标联动，基于鼠标在其中的位置控制图片的位移。

div.imgs 放三方图片，图片均来自mihoyo官网。

div.text 则是凑数的，模拟mihoyo官网文本内容。

二、CSS

写的 SCSS

html{
    font-size: 100px;
}
body{
    font-size: 0.16rem;
}

.wrapper{
    width: 100vw;
    min-width: 1400px;
    height: 90vh;
    margin-top: 10vh;
    background: #eee;
    display: flex;
    justify-content: center;
    align-items: center;
}
.imgs{
    width: 10rem;
    height: 6.14rem;
    background: #ccc;
    position: relative;
    overflow: hidden;
    img{
        position: absolute;
        bottom:0;
        transform: translateX(0);
        transition:all 0.4s linear;
        &:nth-child(1){
            margin-left: 60%;
        }
        &:nth-child(2){
            margin-left: -10%;
        }
        &:nth-child(3){
            margin-left: 30%;
        }
    }
}
.text{
    width: 4rem;
    height: 6rem;
    margin-left: 0.4rem;
}

关键点就在于，让图片绝对定位，div.imgs 相对定位。

考虑到图片要产生位移动画，就给图片添加了过渡动画 transition 。

三、JS

关键点：

1. 要通过JS 获取 鼠标在 div.wrapper 里的位置。利用了 DOM 的 getBoundingClientRect() 方法。

具体可以参考博主这篇文章：100%经典文章：JS如何获取鼠标在一个标签中的坐标_获取标签的坐标-CSDN博客

2. 鼠标位移的距离，是以 div.wrapper 的中线为参考。鼠标在左，图片右移；鼠标在右，图片左移。

3. 每张图片都移动，每张图移动到距离还不一样。简化操作，就让图片位移 translateX 一定的百分比（这个百分比是以图片宽度为参考）。利用循环，让每个图片都位移百分比有偏差。这样，每个图片位移的距离就不同，产生了视觉差。

完整代码：（模仿，跟官网原版效果还是有出入）

// 获取图片元素，wrapper元素
let imgs = document.getElementById('imgs').querySelectorAll('img');
let wrapper = document.getElementById('wrapper');
// 获取鼠标位置
function getMousePos(e) {
    let rect = wrapper.getBoundingClientRect();
    return {
        x: e.clientX - rect.left,
        y: e.clientY - rect.top
    };
}
// 鼠标移动事件
function moveImg(e) {
    let mousePos = getMousePos(e);  // 获取鼠标在wrapper里的坐标
    let x = (mousePos.x / wrapper.offsetWidth) * 100;  // 计算图片移动距离百分比
    let xP = (x - 50)/50;  //  50%为图片宽度的一半，计算图片移动距离百分比
    imgs.forEach((img,index) => {  // 每张图片都移动，移动距离为 （5 + 索引数据）% 图片宽度
        img.style.transform = `translateX(${-xP*(5+index*2)}%)`;
    });
}
wrapper.addEventListener('mousemove', moveImg);

完毕~！