鼠标跟随动画
转自bilibili:[Html+Css+Js]制作鼠标跟踪效果，谁会拒绝一个跟着鼠标的网页小宠物呢？
开始:
以下是网站代码:
<!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>test</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background: rgb(240, 230, 240);
}
.goat{
width: 50px;
height: 50px;
position: absolute;
background-image: url('./goat.gif');
background-size: cover;
}
</style>
</head>
<body>
<div class="goat"></div>
</body>
<script>
let goat = document.querySelector('.goat')
// 定义小图片的旋转角度
let deg = 0
// 定义小图片位于网页左侧的位置
let goatx = 0
// 定义小图片位于网页顶部的位置
let goaty = 0
// 定义小图片x轴的位置
let goatl = 0
// 定义小图片y轴的位置
let goatt = 0
// 定义小图片翻转的角度
let y = 0
// 定义一个计数器
let index = 0
window.addEventListener('mousemove',function(xyz){
// 获取网页左侧距离的图片位置
goatx = xyz.x - goat.offsetLeft - goat.clientWidth /2
// 多去网页顶部距离图片的位置
goaty = xyz.y - goat.offsetTop - goat.clientHeight /2
// 套入公式，定义图片的旋转角度
deg = 360*Math.atan(goaty/goatx)/(2*Math.PI)
// 每当鼠标移动的时候重置index
index= 0
// 定义当前鼠标的位置
let x = event.clientX
// 当鼠标的x轴大于图片的时候，提普安就要对着鼠标，所以需要将图片翻转过来
// 否则就不用翻转
if(goat.offsetLeft<x){
y=-180
}else{
y=0
}
})
setInterval(()=>{
// 设置小图片的旋转和翻转
goat.style.transform = "rotateZ("+deg+"deg) rotateY("+y+"deg)"
index++
// 在这里设置小图片的位置和速度，并判断小图片到达鼠标位置时停止移动
if(index<50){
goatl+=goatx/50
goatt+=goaty/50
}
goat.style.left = goatl+"px"
goat.style.top = goatt+"px"
},10)
</script>
</html>项目地址:鼠标跟随
PS:
因为我的页面已经存在相同的img标签容器,会与这个script存在冲突,所以把原本script的img全部换成了goat,css中的路径换成自己的或者放在JS同目录下即可
