윈도우에서 마우스 커서 좌표 찾기 업그레이드 버전

이전 포스트 :

https://jsp0422.tistory.com/30?category=974379

 

 

HTML은 동일.

<브라우져 로딩을 빠르게 하는 버전>

- 1버전은 top과 left 사용시 paint가 계속 일어나기 때문에 속도/성능에 좋지 않음.

   transform/translate을 이용하는게 좋음. compodite만 발생.

참조 https://jsp0422.tistory.com/68

(Critical Rendering Path (브라우져 랜더링 순서))

 

JavsScript

const vertical = document.querySelector('.vertical');
const horizontal = document.querySelector('.horizontal');
const target = document.querySelector('.target');
const tag = document.querySelector('.tag');

addEventListener('load', () => {
  const targetRect = target.getBoundingClientRect();
  const targetHalfWidth = targetRect.width / 2;
  const targetHalfHeight = targetRect.height / 2;

  document.addEventListener('mousemove', event => {
    const x = event.clientX;
    const y = event.clientY;
    console.log(`${x} ${y}`);

    vertical.style.transform = `translateX(${x}px)`;
    horizontal.style.transform = `translateY(${y}px)`;
    target.style.transform = `translate(${x - targetHalfWidth}px,${
      y - targetHalfHeight
    }px)`;
    tag.style.transform = `translate(${x}px,${y}px)`;
    tag.innerHTML = `${x}px, ${y}px`;
  });
});

 

 

CSS

body {
  background-color: black;
  margin: 0;
}
.line {
  position: absolute;
  background-color: white;
}
.horizontal {
  width: 100%;
  height: 1px;
}
.vertical {
  height: 100%;
  width: 1px;
}

.target {
  position: absolute;
  transform: translate(-50%, -50%);
}

.tag {
  color: white;
  position: absolute;
  font-size: 38px;
  margin: 20px;
}