首页 > 资讯 > 前端开发 > JavaScript >跳舞的小人鼠标跟随事件效果实现

307

分享到

跳舞的小人鼠标跟随事件效果实现

跳舞小人鼠标跟随事件鼠标跟随事件 2023-05-19 08:05:10 307人浏览薄情痞子

摘要

目录鼠标跟随事件实现效果基本属性的定义根据鼠标在图片上的位置计算图片的旋转角度和翻转实现图片跟随源码鼠标跟随事件在这里，我本来想弄一个灰太狼抓羊的动画效果，就是将我们的鼠标loGo

鼠标跟随事件

在这里，我本来想弄一个灰太狼抓羊的动画效果，就是将我们的鼠标loGo替换成一只羊的照片，然后后面跟随着一只狼，设置了cursor: url('./01.gif'), auto这个属性，但是好像没有成功，好像是兼容问题。于是找了一张给会动的gif。

实现效果

整体十分简单，主要就是js代码。

html里我们就只是放了一张图片

<div class="img"></div>

然后简简单单的给他们设置了一下大小和样式。

  * {
            margin: 0;
            padding: 0;
        }
![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e17598cd683f41fe89fDDDa68981de97~tplv-k3u1fbpfcp-watermark.image?)
        body {
            background: rgb(240, 230, 240);
        }
        .img {
            width: 10%;
            height: 20%;
            position: absolute;
            background-image: url('./01.gif');
            background-size: cover;
        }

看一看主要的js代码

基本属性的定义

这里我们主要是进行一些基本属性的定义和设置，index可以看成是时间桢或者循环次数。

let img = document.querySelector('.img')
    // 定义小图片的旋转角度
    let deg = 0
    // 定义小图片位于网页左侧的位置
    let imgx = 0
    // 定义小图片位于网页顶部的位置
    let imgy = 0
    // 定义小图片x轴的位置
    let imgl = 0
    // 定义小图片y轴的位置
    let imgt = 0
    // 定义小图片翻转的角度
    let y = 0
    // 定义一个计数器
    let index = 0

根据鼠标在图片上的位置计算图片的旋转角度和翻转

首先，通过 e.x 获取鼠标在页面上的横坐标，img.offsetLeft 获取图片左边边缘距页面左边边缘的距离，img.clientWidth / 2 获取图片宽度的一半，即图片中心点距图片左边边缘的距离。将这三个值相减，得到鼠标相对于图片中心点的横向偏移量，即 imgx。

 imgx = e.x - img.offsetLeft - img.clientWidth / 2

同样地，通过 e.y 获取鼠标在页面上的纵坐标，img.offsetTop 获取图片上边边缘距页面上边边缘的距离，img.clientHeight / 2 获取图片高度的一半，即图片中心点距图片上边边缘的距离。将这三个值相减，得到鼠标相对于图片中心点的纵向偏移量，即 imgy。

imgy = e.y - img.offsetTop - img.clientHeight / 2

接下来，根据 imgx 和 imgy 的值，使用 Math.atan2 计算出以图片中心为原点的弧度值，并将弧度值转换为角度值，即 deg，这就是图片需要旋转的角度。最后，将 deg 赋值给 rotate 属性，就可以实现对图片的旋转了。

 deg = 360 * Math.atan(imgy / imgx) / (2 * Math.PI)

然后，通过 index = 0 定义了一个初始值为 0 的变量 index，用于后续的操作。接下来，通过 let x = event.clientX 获取到当前鼠标的水平坐标位置。

    // 每当鼠标移动的时候重置index
     index = 0
    // 定义当前鼠标的位置
    let x = event.clientX

然后，使用 if 判断图片的左边界是否小于当前鼠标的位置，也就是判断鼠标是否在图片的右侧。如果鼠标在图片的右侧，说明图片需要向左翻转，这时候将 y 赋值为 -180，用于后续的样式设置。如果鼠标在图片的左侧，说明图片无需翻转，此时将 y 赋值为 0。最终，将 y 值赋给图片的 rotateY 样式属性，就可以实现对图片的翻转效果了。当 y 为 -180 时，图片将被翻转过来；当 y 为 0 时，图片不会被翻转。

 // 当鼠标的x轴大于图片的时候，就要对着鼠标，所以需要将图片翻转过来
    // 否则就不用翻转
    if (img.offsetLeft &lt; x) {
        y = -180
    } else {
        y = 0
    }

 window.addEventListener('mousemove', function (e) {
        // 获取网页左侧距离的图片位置
        imgx = e.x - img.offsetLeft - img.clientWidth / 2
        // 多去网页顶部距离图片的位置
        imgy = e.y - img.offsetTop - img.clientHeight / 2
        // 套入公式，定义图片的旋转角度
        deg = 360 * Math.atan(imgy / imgx) / (2 * Math.PI)
        // 每当鼠标移动的时候重置index
        index = 0
        // 定义当前鼠标的位置
        let x = event.clientX
        // 当鼠标的x轴大于图片的时候，就要对着鼠标，所以需要将图片翻转过来
        // 否则就不用翻转
        if (img.offsetLeft &lt; x) {
            y = -180
        } else {
            y = 0
        }
    })

实现图片跟随

这段代码的作用是通过 javascript 实现对图片的旋转和移动。然后利用了setInterval一直重复

首先，使用 img.style.transfORM 将旋转角度 deg 和翻转角度 y 应用于元素的 transform 样式。rotateZ 用于实现元素绕 z 轴旋转，而 rotateY 则用于实现元素的翻转效果。注意，这里使用字符串拼接的方式将旋转角度和翻转角度拼接起来，以达到应用两个属性值的效果。

img.style.transform = "rotateZ(" + deg + "deg) rotateY(" + y + "deg)"

接下来，将 index 的值加一，即 index++，表明下一帧需要进行的操作。

index++

然后，使用条件语句 if (index < 50) 对小图片的位置进行调整。在这里，通过不停地调整小图片的位置，实现了小图片沿着鼠标运动的效果。其中，imgl += imgx / 50 用于计算小图片应移动的水平距离，而 imgt += imgy / 50 则用于计算小图片应移动的垂直距离。50 是移动的帧数，可以根据需求进行调整。

// 在这里设置小图片的位置和速度，并判断小图片到达鼠标位置时停止移动 
if (index &lt; 100) 
{ 
imgl += imgx / 100 
imgt += imgy / 100 
} 
img.style.left = imgl + "px" 
img.style.top = imgt + "px"

setInterval(() => {
        // 设置小图片的旋转和翻转
        img.style.transform = "rotateZ(" + deg + "deg) rotateY(" + y + "deg)"
        index++
        // 在这里设置小图片的位置和速度，并判断小图片到达鼠标位置时停止移动
        if (index < 100) {
            imgl += imgx / 100
            imgt += imgy / 100
        }
        img.style.left = imgl + "px"
        img.style.top = imgt + "px"
    }, 10)

源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta Http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠标跟随</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background: rgb(240, 230, 240);
        }
        .img {
            width: 10%;
            height: 20%;
            position: absolute;
            background-image: url('./01.gif');
            background-size: cover;
        }
    </style>
</head>
<body>
    <div class="img"></div>
</body>
<script>
    let img = document.querySelector('.img')
    // 定义小图片的旋转角度
    let deg = 0
    // 定义小图片位于网页左侧的位置
    let imgx = 0
    // 定义小图片位于网页顶部的位置
    let imgy = 0
    // 定义小图片x轴的位置
    let imgl = 0
    // 定义小图片y轴的位置
    let imgt = 0
    // 定义小图片翻转的角度
    let y = 0
    // 定义一个计数器
    let index = 0
    window.addEventListener('mousemove', function (e) {
        // 获取网页左侧距离的图片位置
        imgx = e.x - img.offsetLeft - img.clientWidth / 2
        // 多去网页顶部距离图片的位置
        imgy = e.y - img.offsetTop - img.clientHeight / 2
        // 套入公式，定义图片的旋转角度
        deg = 360 * Math.atan(imgy / imgx) / (2 * Math.PI)
        // 每当鼠标移动的时候重置index
        index = 0
        // 定义当前鼠标的位置
        let x = event.clientX
        // 当鼠标的x轴大于图片的时候，就要对着鼠标，所以需要将图片翻转过来
        // 否则就不用翻转
        if (img.offsetLeft < x) {
            y = -180
        } else {
            y = 0
        }
    })
    setInterval(() => {
        // 设置小图片的旋转和翻转
        img.style.transform = "rotateZ(" + deg + "deg) rotateY(" + y + "deg)"
        index++
        // 在这里设置小图片的位置和速度，并判断小图片到达鼠标位置时停止移动
        if (index < 100) {
            imgl += imgx / 100
            imgt += imgy / 100
        }
        img.style.left = imgl + "px"
        img.style.top = imgt + "px"
    }, 10)
</script>
</html>

以上就是跳舞的小人，鼠标跟随事件的详细内容，更多关于跳舞的小人，鼠标跟随事件的资料请关注编程网其它相关文章！

--结束END--

本文标题: 跳舞的小人鼠标跟随事件效果实现

本文链接: https://lsjlt.com/news/212790.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

回答

如何调试操作系统的错误？
操作系统

2023-11-15发布

回答

操作系统中的I/O系统是如何实现的？
操作系统

2023-11-15发布

回答

如何实现操作系统的内存管理？
操作系统

2023-11-15发布

回答

什么是虚拟内存，它对操作系统有什么影响？
操作系统

2023-11-15发布

回答

ASP中的MVC架构和WebForms架构有什么区别和使用场景？
ASP.NET

2023-11-15发布

回答

ASP中的数据验证和数据校验有什么不同？
ASP.NET

2023-11-15发布

回答

ASP中的ADO对象和DAO对象有什么区别和使用方法？
ASP.NET

2023-11-15发布

回答

Node.js中的包管理器NPM是什么？如何使用它进行依赖管理？
node.js

2023-11-15发布

回答

Vue.js中的动态组件是什么？如何使用它来动态渲染组件？
VUE

2023-11-15发布

回答

如何使用Vue.js实现懒加载和预加载？
VUE

2023-11-15发布

跳舞的小人鼠标跟随事件效果实现

目录

鼠标跟随事件

实现效果

基本属性的定义

根据鼠标在图片上的位置计算图片的旋转角度和翻转

实现图片跟随

源码

跳舞的小人鼠标跟随事件效果实现

jQuery如何实现鼠标跟随效果

ES6与canvas如何实现鼠标小球跟随效果

js如何实现鼠标跟随运动效果

js实现鼠标跟随小游戏

vue如何实现组件跟随鼠标位置弹出效果

JavaScript利用canvas实现鼠标跟随特效

如何使用CSS实现鼠标跟随3D旋转效果

html+css+js实现canvas跟随鼠标的小圆特效源码

vue实现组件跟随鼠标位置弹出效果(示例代码)

使用canvas怎么实现一个跟随鼠标的小圆特效

怎么用巧用CSS实现鼠标跟随3D旋转效果

html+css+javascript实现跟随鼠标移动显示选中效果的方法

javascript实现跟随鼠标移动的图片

html5中怎么利用canvas实现跟随光标跳动火焰效果

Java如何实现鼠标随机移动效果

Java实现鼠标随机移动效果的示例代码

html5中canvas如何实现跟随鼠标旋转的箭头

css怎么实现随鼠标移动div渐变色效果

怎么使用JS实现一个跟随鼠标移动洒落的星星特效

京东一面：post为什么会发送两次请求？???

鼠标划过时整行变色284607详解

鼠标划过时整行变色284415处理办法

TypeScript接口和类型的区别小结

写给小白学习的地理信息的表示法GeoJSON

vue使用Swiper踩坑解决避坑

JavaScrip简单数据类型隐式转换的实现

细说JS数组遍历的一些细节及实现

初学者如何快速搭建Express开发系统步骤详解

深入浅出JavaScript前端中的设计模式