原生JavaScript+CSS：让吉祥物眼球活灵活现！

2023-09-21 03:19:02





### 开篇引语
在如今交互性日益重要的Web世界中，为网页增添生动有趣的动画和交互细节已变得至关关键。而让网页中的吉祥物、头像或卡通形象的眼睛跟随鼠标的转动，无疑是吸引眼球的绝佳创意。

### 探索原生JavaScript与CSS的魅力
本篇教程将引导你使用原生JavaScript和CSS来打造出眼球跟随鼠标的酷炫视觉特效。无需借助繁杂的库或大型JavaScript架构，我们只需掌握少量核心概念即可。

#### **步：HTML结构** 

```html
<div id="mascot">
  <img src="mascot.png" alt="吉祥物">
  <div id="eyes">
    <div class="pupil"></div>
    <div class="pupil"></div>
  </div>
</div>

#mascot 容器包含了吉祥物及用于定位眼球的相对定位父级 #eyes。
#eyes 的直接子代是 #pupil，即眼珠。

步：CSS基础

#mascot {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: scale(0.8) rotate(-15deg);
}

#eyes {
  position: relative;
  top: -50%;
  left: -50%;
  transform: scale(0.6);
}

.pupil {
  width: 15px;
  height: 15px;
  border-top-left-Radius: 50%;
  border-top-right-Radius: 50%;
  border-bottom-left-Radius: 50%;
  border-bottom-right-Radius: 50%;
  background: #FFF;
}

为 #mascot 设置适当的 transform 属性，以便将吉祥物缩小并旋转至预期角度。
#eyes 相对定位，且缩小至原尺寸的 60%，便于贴合吉祥物头部。
#pupil 设定为直径 15px 的白色圆形。

步：捕捉鼠标移动

window.onmousemove = function(e) {
  var mouseX = e.clientX;
  var mouseY = e.clientY;
  
  // 眼球移动的横向距离，限于吉祥物头部容器宽度内
  var horzOffset = Math.max(Math.min(mouseX / window.innerWidth, 0.95), -0.25);
  
  // 眼球移动的纵向距离，限于吉祥物头部容器高度内
  var verOffset = Math.max(Math.min(1 - mouseY / window.innerHeight, 0.95), 0.25);
  
  document.getElementById("eyes").style.transform = "translateX(" + horzOffset + "em) translateY(-" + verOffset + "em);";
};