鼠标跟随事件
在这里,我本来想弄一个灰太狼抓羊的动画效果,就是将我们的鼠标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 < 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 < 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 < 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>
复制代码