如何讓眼睛跟隨 object？

Question

我不完全確定我的代碼有什么問題。 眼睛（虹膜）似乎鎖定在眼睛的右下角，並在那固定的 position 上旋轉。 我查看了在線教程並嘗試了各種代碼，但似乎沒有一個有效。 我想要實現的最終目標是讓眼睛跟隨給定的塊。

先感謝您！

 window.addEventListener('mousemove', eyeball); function eyeball() { const eye = document.querySelectorAll('.eye'); eye.forEach(function(eye){ let x = (eye.getBoundingClientRect().left) + (eye.clientWidth / 2); let y = (eye.getBoundingClientRect().top) + (eye.clientHeight / 2); let radian = Math.atan2(event.pageX - x, event.pageY - y); let rotation = (radian * (180 / Math.PI) * -1) + 270; eye.style.transform = "rotate("+rotation+"deg)"; }); }

 .eye-container { position: absolute; display: flex; justify-content: center; width: 100%; margin-top: 20px; background: pink; }.eyeball{ position: relative; width: 100px; height: 90px; border-radius: 50%; background: white; margin-right: 20px; box-shadow: inset 0 0 5px black; overflow: hidden; }.pupil{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50px; height: 45px; border-radius: 50%; background: black; border: 10px solid purple; box-sizing: border-box; }.block{ position: absolute; top: 50%; width: 100px; height: 100px; background: red; }

 <section class="eye-container"> <div class="eyelids eyelid-left"></div> <div class="eyelids eyelid-right"></div> <div class=" eyeball left-eye"> <div class=" eye pupil left-pupil"></div> </div> <div class="eyeball right-eye"> <div class="eye pupil right-pupil"></div> </div> </section> <div class="block"></div>

Answer 1

你想要的可能更像這樣。 這會將學生翻譯到位，使其具有“以下外觀”。

function eyeball(target_x, target_y) {
  const eye = document.querySelectorAll('.eye');
  eye.forEach(function(eye){
    let x = (eye.getBoundingClientRect().left) + (eye.clientWidth / 2);
    let y = (eye.getBoundingClientRect().top) + (eye.clientHeight / 2);
    let radian = Math.atan2(target_x - x, target_y - y);
    let transform_x = Math.round(Math.sin(radian) * 100);
    let transform_y = Math.round(Math.cos(radian) * 100);
    eye.style.transform = "translate(" + transform_x + "%, " + transform_y + "%)";
  });
}

您還需要更改學生的初始樣式，以獲得 position 更改的正確偏移。

.pupil{
  margin-left: 25px;
  margin-top: 25px;
  width: 50px;
  height: 45px;
  border-radius: 50%;
  background: black;
  border: 10px solid purple;
  box-sizing: border-box;
}

Answer 2

AE，我嘗試添加代碼，但它似乎仍然無法移動瞳孔，但它確實使瞳孔居中在眼球內：

function eyeball(targetX, targetY) {
 const eye = document.querySelectorAll('.eye');
 eye.forEach(function(eye){
let x = (eye.getBoundingClientRect().left) + (eye.clientWidth / 2);
let y = (eye.getBoundingClientRect().top) + (eye.clientHeight / 2);

let radian = Math.atan2(targetX - x, targetY - y);
let transformX = Math.round(Math.sin(radian) * 100);
let transformY = Math.round(Math.cos(radian) * 100);
eye.style.transform = "translate("+transformX+"%, "+transformY+ "%)";
});
} 

.eye-container {
 position: absolute;
 display: flex;
 justify-content: center;
 width: 100%;
 margin-top: 20px;
 background: pink;
 }

 .eyelids{

  }

 .eyeball{
 position: relative;
 width: 100px;
height: 90px;
border-radius: 50%;
 background: white;
 margin-right: 20px;
 box-shadow: inset 0 0 5px black;
 overflow: hidden;

 }
.pupil{
 margin-left: 25px;
 margin-top: 25px;
  width: 50px;
 height: 45px;
 border-radius: 50%;
 background: black;
 border: 10px solid purple;
  box-sizing: border-box; 
 }