Как получить координаты в JS?

Question

[Sidny187]

Скопипастил код для глаз, следящих за курсором, и он работает, но есть проблема с координатами. Первоначально координаты такие(глаз прижат к верхнему левому краю):

let x = event.x -50;
let y = event.y -50;

Однако, у меня глаз находится в другом месте, и из-за этого зрачок неверно двигается. Так же у каждого устройства уникальный размер и тут тоже нужны другие значения.

Весь код:

<div class="y-1">
         <div class="y-2"></div>
    </div>

    <div class="y-3">
         <div class="y-4"></div>
    </div>

    <script>
        document.onmousemove = function (event) {
            let x = event.x // координаты ;
            let y = event.y // координаты ;
            console.log(x + ' ' + y);
            document.querySelector('.y-1').style.transform = 'rotate(' + 57.2958 * arcctg(x, y)+'deg)';
            document.querySelector('.y-3').style.transform = 'rotate(' + 57.2958 * arcctg(x - 30, y)+'deg)';

            function arcctg (x, y){
                if (x > 0 && y > 0) return Math.PI / 2 - Math.atan(x / y);
                if (x < 0 && y > 0) return Math.PI / 2 - Math.atan(x / y);
                if (x < 0 && y < 0) return Math.PI + Math.atan(y / x);
                if (x > 0 && y < 0) return 3 * Math.PI / 2 + Math.abs(Math.atan(x / y));
            }
        }
    </script>

Можно ли сделать так, чтобы координаты находились автоматически? Если можно, то как?

Comments

[Александр]

Оформите в песочницу (CodePen, JSFiddle, CodeSandbox).

[Sidny187]

Александр,

Answer 1

[kryamk]

Comments

[Sidny187]

Спасибо огромное! все безупречно работает!

[Александр]

Sidny187, Можно сделать проще

document.addEventListener('DOMContentLoaded', () => {
	const eye1 = document.querySelector('.y-1');
	const eye2 = document.querySelector('.y-3');
	const radian = 180 / Math.PI;
	
	document.addEventListener('mousemove', (event) => {
		const coordEye1 = eye1.getBoundingClientRect();
		const centerEye1 = {
			x: coordEye1.left + coordEye1.width / 2,
			y: coordEye1.top + coordEye1.height / 2
		};
		const angleEye1 = Math.atan2(event.clientY - centerEye1.y, event.clientX - centerEye1.x);

		const coordEye2 = eye2.getBoundingClientRect();
		const centerEye2 = {
			x: coordEye2.left + coordEye2.width / 2,
			y: coordEye2.top + coordEye2.height / 2
		};
		const angleEye2 = Math.atan2(event.clientY - centerEye2.y, event.clientX - centerEye2.x);
		
		eye1.style.setProperty('transform', `rotate(${radian * angleEye1}deg)`);
		eye2.style.setProperty('transform', `rotate(${radian * angleEye2}deg)`);
	});
});

Или так

const relativeFollowCursor = (selector, callback) => {
  const element = document.querySelector(selector);
  const degreeInRadian = 180 / Math.PI;

  document.addEventListener('mousemove', (event) => {
    const rect = element.getBoundingClientRect();
    const centerX = rect.left + rect.width / 2;
    const centerY = rect.top + rect.height / 2;
    const angle = Math.atan2(event.clientY - centerY, event.clientX - centerX);

    callback(element, {
      radian: angle,
      degree: degreeInRadian * angle
    });
  });
};

document.addEventListener('DOMContentLoaded', () => {
  relativeFollowCursor('.y-1', (eye, { degree }) => eye.style.setProperty('transform', `rotate(${degree}deg)`));
  relativeFollowCursor('.y-3', (eye, { degree }) => eye.style.setProperty('transform', `rotate(${degree}deg)`));
});