我当时在YouTube上看一个关于如何制作跟随鼠标的动画眼睛的教程,但我的眼睛看的方向相反。
一开始我卡住了,因为我忘了写script type=“text/javascript”。之后,我设法完成了代码,但我的眼睛看向了鼠标的相反方向。这一定是数学,但这是我第一次在JS上做一些事情,我找不到。
document.querySelector('body').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)"
});
}
1条答案
按热度按时间5f0d552i1#
问题似乎与Math.atan2函数有关。该函数有两个参数:y坐标和x坐标。请参见docs for Math.atan2。
尝试更改此行:
改为: