如何让眼球跟随光标？

问题描述 投票：0回答：1

当前整个眼睛跟随鼠标光标移动，但瞳孔不移动。我只想让眼球跟随。

我修改了我遵循的教程的代码。不是两只眼睛，而是一只眼睛。我创造了一个椭圆形的眼睛，而不是圆形的眼睛。这是我迄今为止拥有的 html、css 和 javascript。

<!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", eyeball);
      function eyeball() {
        const eye = document.querySelector(".eye");
        let x = eye.getBoundingClientRect().left + eye.clientWidth / 2;
        let y = eye.getBoundingClientRect().top + eye.clientHeight / 2;
        let radian = Math.atan2(event.clientX - x, event.clientY - y);
        let rot = radian * (180 / Math.PI) * -1 + 270;
        eye.style.transform = `rotate(${rot}deg)`;
      }
    </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>

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;
  transform: rotate(45deg);
}
.eye {
  width: 50px;
  height: 50px;
  background-color: white;
  border-radius: 80% 10%;
  position: relative;
  display: block;
}
.eye:before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: black;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


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 result = response;
        const lat = result.data.iss_position.latitude;
        const lon = result.data.iss_position.longitude;
        res.render("index.ejs", { lat: lat, lon: lon }); 
        
    } catch (error) {
        console.error(error.response.data);
        res.status(500).send("Failed to fetch random activity.");
    } 
});



app.listen(port, () => {
    console.log(`Server is running on port ${port}`);
});
javascript html css
1个回答
0
投票

就像 @AHaworth 所说，在 Javascript 中使用定位而不是旋转。

在此代码片段中，我更改了一些内容：

  1. 使用 .pupil div 而不是 .eye:before （样式类似）
  2. 用 .pupil 的移动替换 .eye 旋转 Javascript 代码

有关原始代码更改的更多详细信息，请参阅“编辑”注释。

document.addEventListener("mousemove", eyeball);

function eyeball() {
  const eye = document.querySelector(".eye");
  let x = eye.getBoundingClientRect().left + eye.clientWidth / 2;
  let y = eye.getBoundingClientRect().top + eye.clientHeight / 2;
  let radian = Math.atan2(event.clientX - x, event.clientY - y);
  // EDIT
  // eye.style.transform = `rotate(${rot}deg)`;

  // EDIT
  const pupil = document.querySelector(".pupil");
  let newX = Math.sin( radian - (Math.PI/4) ) * 25
  let newY = Math.cos( radian - (Math.PI/4) ) * 10
  pupil.style.left = newX + 30 + "px"
  pupil.style.top = newY + 15 + "px"
}
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;
  /* EDIT Don't rotate, it breaks the position from Javascript */
  /* transform: rotate(45deg); */
  margin-top: 50px;
}
.eye {
  background-color: white;
  /* EDIT Change width and border shape, since we aren't rotating */
  width: 80px;
  height: 50px;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
  position: relative;
}
/* EDIT No longer using :before */
/* .eye:before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: black;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
} */

/* EDIT - add pupil settings (simmilar to .eye:before) */
.pupil {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: black;
  border-radius: 50%;
  /* top and left will be set by Javascript */
  top: 10px;
  left: 10px;
}
        <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>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.