<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="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>
<divclass="img"></div>
</body>
<script>
letimg=document.querySelector('.img')
//定义小图片的旋转角度
letdeg=0
//定义小图片位于网页左侧的位置
letimgx=0
//定义小图片位于网页顶部的位置
letimgy=0
//定义小图片x轴的位置
letimgl=0
//定义小图片y轴的位置
letimgt=0
//定义小图片翻转的角度
lety=0
//定义一个计数器
letindex=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
//定义当前鼠标的位置
letx=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>
|
运行时间载入中.....