mouse follow event
Here, I originally wanted to create an animation effect of the big gray wolf catching sheep, that is, to replace our mouse logo with a photo of a sheep, followed by a wolf, and set this property, but it seems to be unsuccessful, it seems to be a compatibility cursor: url('./01.gif'), autoissue . So I found a moving gif.
achieve effect
The whole is very simple, mainly js code.
We just put a picture in html
<div class="img"></div>
复制代码Then simply set the size and style for them.
* {
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;
}
复制代码Take a look at the main js code
Here we mainly define and set some basic properties. The index can be regarded as the time frame or the number of cycles.
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
复制代码The function of this code is to calculate the rotation angle and flip of the picture according to the position of the mouse on the picture.
First e.x, img.offsetLeftget the distance from the left edge of the picture to the left edge of the page by getting the abscissa of the mouse on the page, and img.clientWidth / 2get half the width of the picture, that is, the distance from the center point of the picture to the left edge of the picture. Subtract these three values to get the horizontal offset of the mouse relative to the center point of the picture, ie imgx.
imgx = e.x - img.offsetLeft - img.clientWidth / 2
复制代码Similarly, by e.yobtaining the vertical coordinate of the mouse on the page, img.offsetTopthe distance between the top edge of the picture and the top edge of the page is obtained, and img.clientHeight / 2half of the height of the picture is obtained, that is, the distance between the center point of the picture and the top edge of the picture. Subtract these three values to get the vertical offset of the mouse relative to the center point of the picture, ie imgy.
imgy = e.y - img.offsetTop - img.clientHeight / 2
复制代码Next, according imgxto imgythe values of and , use Math.atan2to calculate the radian value with the center of the picture as the origin, and convert the radian value into an angle value, that is deg, this is the angle by which the picture needs to be rotated. Finally, assign dega value to rotatethe attribute to realize the rotation of the image.
deg = 360 * Math.atan(imgy / imgx) / (2 * Math.PI)
复制代码Then index = 0, a 0variable whose initial value is defined by indexis used for subsequent operations. Next, let x = event.clientXget .
// 每当鼠标移动的时候重置index
index = 0
// 定义当前鼠标的位置
let x = event.clientX
复制代码Then, use to ifdetermine whether the left boundary of the picture is smaller than the current mouse position, that is, to determine whether the mouse is on the right side of the picture. If the mouse is on the right side of the picture, it means that the picture needs to be flipped to the left. At this time, assign ythe value -180to be used for subsequent style settings. If the mouse is on the left side of the picture, it means that the picture does not need to be flipped, and will be yassigned a value of 0. Finally, assign ythe value to rotateYthe style attribute of the picture to achieve the flipping effect on the picture. When yis -180, the picture will be flipped; when yis 0, the picture will not be flipped.
// 当鼠标的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
}
})
复制代码The next step is to implement the picture to follow
The function of this code is to realize the rotation and movement of the picture through JavaScript. Then use setInterval to repeat
First, apply a Rotation and Flip Angle to the element's style img.style.transformusing . is used to rotate the element around the z-axis, and is used to flip the element. Note that the rotation angle and flip angle are spliced together by string splicing to achieve the effect of applying two attribute values.degytransformrotateZrotateY
img.style.transform = "rotateZ(" + deg + "deg) rotateY(" + y + "deg)"
复制代码Next, add one to the value indexof , that is index++, indicate the operation that needs to be performed in the next frame.
index++
复制代码Then, use the conditional if (index < 50)statement to adjust the position of the small picture. Here, by constantly adjusting the position of the small picture, the effect of the small picture moving along the mouse is realized. Among them, imgl += imgx / 50is used to calculate the horizontal distance that the small picture should move, and imgt += imgy / 50is used to calculate the vertical distance that the small picture should move. 50It is the number of frames of movement, which can be adjusted according to needs.
// 在这里设置小图片的位置和速度，并判断小图片到达鼠标位置时停止移动
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)
复制代码source code
<!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>
复制代码