css 我的眼睛看着相反的方向,为什么?

yhqotfr8  于 2023-03-14  发布在  其他
关注(0)|答案(1)|浏览(95)

我当时在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)"
        });
    }
5f0d552i

5f0d552i1#

问题似乎与Math.atan2函数有关。该函数有两个参数:y坐标x坐标。请参见docs for Math.atan2
尝试更改此行:

let radian = Math.atan2(event.pageX - x, event.pageY - y);

改为:

let radian = Math.atan2(event.pageY - y, event.pageX - x);

相关问题