如何实现瞳孔跟随鼠标光标移动（当前仅整个眼球转动）

问题说明 #

当前代码实现了整个眼球跟随鼠标旋转，但需求是仅让瞳孔跟随光标移动，且已将双眼改为单眼、圆形眼睛改为椭圆形。

修改后的完整代码 #

HTML 代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ISS Position</title>
    <link rel="stylesheet" href="styles/main.css" />
    <script>
      document.addEventListener("mousemove", movePupil);
      function movePupil(event) {
        const eye = document.querySelector(".eye");
        const pupil = document.querySelector(".pupil");
        
        // 获取眼睛的中心坐标和尺寸
        const eyeRect = eye.getBoundingClientRect();
        const eyeCenterX = eyeRect.left + eyeRect.width / 2;
        const eyeCenterY = eyeRect.top + eyeRect.height / 2;
        
        // 计算鼠标相对于眼睛中心的偏移量
        const dx = event.clientX - eyeCenterX;
        const dy = event.clientY - eyeCenterY;
        
        // 计算瞳孔可移动的最大范围（适配椭圆眼睛比例）
        const maxRadiusX = (eyeRect.width - pupil.offsetWidth) / 2;
        const maxRadiusY = (eyeRect.height - pupil.offsetHeight) / 2;
        
        // 计算角度和距离，限制瞳孔在眼睛内部
        const angle = Math.atan2(dy, dx);
        const distance = Math.min(Math.sqrt(dx*dx + dy*dy), Math.max(maxRadiusX, maxRadiusY));
        
        // 转换为百分比偏移量，适配椭圆眼睛
        const pupilX = (Math.cos(angle) * distance) / eyeRect.width * 100;
        const pupilY = (Math.sin(angle) * distance) / eyeRect.height * 100;
        
        // 设置瞳孔位置
        pupil.style.transform = `translate(${pupilX}%, ${pupilY}%)`;
      }
    </script>
  </head>
  <body>
    <h1>Welcome to the ISS Locater</h1>
    <div class="eye-container">
      <div class="eye">
        <div class="pupil"></div>
      </div>
    </div>
    <div class="container">
      <label for="lat">Latitude</label>
      <input id="lat" type="text" placeholder="<%= lat %>" name="Latitude" />
      <label for="lon">Longitude</label>
      <input id="lon" type="text" placeholder="<%= lon %>" name="Longitude" />
      <h2>Click the link below to see where it is now on a map</h2>
      <a href="https://www.google.com/maps/search/?api=1&query=<%= lat %>,<%= lon %>">Current ISS Location</a>
    </div>
  </body>
</html>

CSS 代码

h1 {
  margin-top: 100px;
  text-align: center;
  color: white;
}
.container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  height: 100vh;
}
body {
  background-color: black;
}
label {
  color: white;
}
h2 {
  color: white;
}
.eye-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.eye {
  width: 50px;
  height: 50px;
  background-color: white;
  border-radius: 80% 10%;
  position: relative;
  overflow: hidden; /* 确保瞳孔不会超出眼睛边界 */
}
.pupil {
  width: 20px;
  height: 20px;
  background-color: black;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 初始居中 */
  transition: transform 0.1s ease; /* 平滑移动过渡 */
}

Node.js 代码（无核心修改）

import express from 'express';
import bodyParser from 'body-parser';
import axios from 'axios';

const app = express();
const port = 3000;

app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static('public'));

app.get("/", async (req, res) => {
    try {
        const response = await axios.get("http://api.open-notify.org/iss-now.json");
        const lat = response.data.iss_position.latitude;
        const lon = response.data.iss_position.longitude;
        res.render("index.ejs", { lat: lat, lon: lon }); 
        
    } catch (error) {
        console.error(error.response?.data || error.message);
        res.status(500).send("Failed to fetch ISS position.");
    } 
});

app.listen(port, () => {
    console.log(`Server is running on port ${port}`);
});

关键修改点 #

1. 移除眼球旋转逻辑：删除原代码中旋转整个.eye元素的逻辑，改为直接计算瞳孔的位置偏移。
2. 统一瞳孔DOM元素：使用HTML中已有的.pupil div替代CSS伪元素，便于JS直接控制位置。
3. 瞳孔范围限制：根据椭圆眼睛的尺寸计算瞳孔可移动的最大距离，确保瞳孔始终在眼睛内部。
4. 平滑过渡效果：给瞳孔添加transition属性，让移动更自然。
5. 修正容器旋转：移除.eye-container的rotate(45deg)，避免眼睛初始方向偏移（若需保留椭圆角度，可重新添加并调整坐标计算逻辑）。

内容的提问来源于stack exchange，提问作者David Vance