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

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

我说:可以,很不错的。

她说:有些效果有点难,能不能帮我看下。

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

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

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

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

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

一、HTML

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

css 复制代码
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博客

  1. 鼠标位移的距离,是以 div.wrapper 的中线为参考。鼠标在左,图片右移;鼠标在右,图片左移。

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

完整代码:(模仿,跟官网原版效果还是有出入)

javascript 复制代码
// 获取图片元素,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);

完毕~!

相关推荐
zhoxier6 分钟前
elementui el-select 获取value和label 以及 对象的方法
javascript·vue.js·elementui
是小狐狸呀8 分钟前
elementUI-表单-下拉框数据选中后,视图不更新
前端·javascript·elementui
四岁半儿3 小时前
常用css
前端·css
你的人类朋友3 小时前
说说git的变基
前端·git·后端
姑苏洛言3 小时前
网页作品惊艳亮相!这个浪浪山小妖怪网站太治愈了!
前端
字节逆旅4 小时前
nvm 安装pnpm的异常解决
前端·npm
Jerry4 小时前
Compose 从 View 系统迁移
前端
IT码农-爱吃辣条4 小时前
Three.js 初级教程大全
开发语言·javascript·three.js
GIS之路4 小时前
2025年 两院院士 增选有效候选人名单公布
前端
四岁半儿4 小时前
vue,H5车牌弹框定制键盘包括新能源车牌
前端·vue.js