JavaScript 鼠标追踪眼睛 👀
今天我们要让这只可爱的小鸡跟着鼠标移动！
我们将使用 JavaScript 让这只 CSS 小鸡的眼睛跟随鼠标的移动。
你能把这妞儿迷得神魂颠倒吗？🐣
请访问此 Codepen 查看完整演示。
HTML结构
我想提一下，我们不会用 CSS 构建完整的鸡，那是以后的事了！
所以，我们来重点训练一下如何让这些眼睛跟随鼠标移动。
<div class="eye eye-left">
<div class="eye-inner"></div>
</div>
<div class="eye eye-right">
<div class="eye-inner"></div>
</div>
这是我们眼睛的 HTML 结构，我们需要一个外层（外部白色部分）、眼睛内部部分（黑色层），我们将使用伪类来赋予它瞳孔（白色）。
CSS
至于 CSS，我们先从主要的白色外层开始：
.eye {
display: flex;
width: 48px;
height: 48px;
position: absolute;
bottom: 41px;
background: #fff;
border-radius: 50%;
&-left {
left: 26px;
}
&-right {
right: 26px;
}
}
由于我们采用的border-radius: 50%是白色背景，所以形状基本为圆形。
现在我们来看黑色内芯部分：
.eye {
&-inner {
position: relative;
display: inline-block;
border-radius: 50%;
width: 40px;
height: 40px;
background-color: black;
border-radius: 50%;
margin-left: 4px;
margin-top: 4px;
}
}
如您所见，黑色部分比我们的主层略小一些。
最后一部分是学生：
.eye {
&-inner {
&:after {
position: absolute;
top: 2px;
left: 10px;
width: 20px;
height: 20px;
background: white;
border-radius: 50%;
content: ' ';
}
}
}
你可以看到它小得多，我们一开始把它放在顶部中心位置。
JavaScript 眼睛跟随鼠标
为了让眼睛跟随鼠标移动，我们将计算鼠标到眼睛的偏移量，然后给眼睛的div元素添加旋转效果。
由于我们使用的是圆形div元素，它会绕自身轴线旋转，从而使眼睛看起来像是在跟随鼠标移动！
首先我们需要检测鼠标移动。
const container = document.querySelector('.container');
container.addEventListener('mousemove', e => {
// Ok mouse is moving!
});
事情发生之后，让我们睁大眼睛仔细查看一遍。
const eyes = document.querySelectorAll('.eye');
[].forEach.call(eyes, function(eye) {});
太棒了，现在我们需要做一些计算，让我们来看一下带有注释的完整最终代码：
const container = document.querySelector('.container');
container.addEventListener('mousemove', e => {
const eyes = document.querySelectorAll('.eye');
[].forEach.call(eyes, function(eye) {
// Get the mouse position on the horizontal axis
let mouseX = eye.getBoundingClientRect().right;
// If it's the left eye we need the left offset instead the right
if (eye.classList.contains('eye-left')) {
mouseX = eye.getBoundingClientRect().left;
}
// Now we also need the vertical offset
let mouseY = eye.getBoundingClientRect().top;
// Now we are going to calculate the radian value of the offset between the mouse and the eye
let radianDegrees = Math.atan2(e.pageX - mouseX, e.pageY - mouseY);
// Let's convert this into a degree based value so we can use it in CSS
let rotationDegrees = radianDegrees * (180 / Math.PI) * -1 + 180;
// Now all we have to do is add this degrees to our eye!
eye.style.transform = `rotate(${rotationDegrees}deg)`;
});
});
瞧，一只老鼠正在追踪一只可爱的小鸡！
感谢阅读，让我们保持联系！
感谢您阅读我的博客。欢迎订阅我的电子邮件简讯，也可以在Facebook或Twitter上关注我。
文章来源：https://dev.to/dailydevtips1/javascript-mouse-tracking-eyes-1e92