效果展示
JS使用眼睛跟随特效
代码展示
实现原理见代码注释
<div class="face">
<div class="eye">
<div class="white">
<div class="black1"></div>
</div>
<div class="white">
<div class="black2"></div>
</div>
</div>
<div class="mouse"></div>
</div>
window.onload = function() {
var eye1 = document.querySelector('.black1')
var eye2 = document.querySelector('.black2')
let x = 0
let y = 0
let top = 75
let left = 75
//添加鼠标移动监听
window.addEventListener('mousemove', function(e) {
//获取鼠标到眼睛模块中心的距离
x = e.x - document.querySelector('.eye').getBoundingClientRect().x - 200
y = e.y - document.querySelector('.eye').getBoundingClientRect().y - 100
})
//创建定时器，每10ms图片移动一次
setInterval(() => {
if(x>50) {
left = 100
}else if(x<-50) {
left = 50
}else {
left = 75
}
if(y>50) {
top = 100
}else if(y<-50) {
top = 50
}else {
top = 75
}
eye1.style.left = left + 'px'
eye1.style.top = top + 'px'
eye2.style.left = left + 'px'
eye2.style.top = top + 'px'
}, 10)
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #929292;
}
.face {
width: 500px;
height: 500px;
border-radius: 50%;
background: #e7d90f;
margin: 100px auto;
}
.eye {
width: 400px;
height: 200px;
margin: auto;
display: flex;
}
.white {
width: 200px;
height: 200px;
border-radius: 50%;
background: #ffffff;
position: relative;
margin: auto;
}
.black1 {
width: 50px;
height: 50px;
border-radius: 50%;
background: #000000;
position: absolute;
top: 75px;
left: 75px;
}
.black2 {
width: 50px;
height: 50px;
border-radius: 50%;
background: #000000;
position: absolute;
top: 75px;
left: 75px;
}
.mouse {
width: 100px;
height: 50px;
background: rgb(245, 84, 84);
border-radius: 50px;
margin: 60px auto;
}