javascript - mouseEffect 01 : 마우스 이팩트 - 따라다니기

 window.addEventListener("mousemove", (event) => {
        document.querySelector(".clientX").innerHTML = event.clientX
        document.querySelector(".clientY").innerHTML = event.clientY
        document.querySelector(".offsetX").innerHTML = event.offsetX
        document.querySelector(".offsetY").innerHTML = event.offsetY
        document.querySelector(".pageX").innerHTML = event.pageX
        document.querySelector(".pageY").innerHTML = event.pageY
        document.querySelector(".screenX").innerHTML = event.screenX
        document.querySelector(".screenY").innerHTML = event.screenY
    });

    // 마우스 움직이기
    window.addEventListener("mousemove", (e) => {
        // document.querySelector(".cursor").style.left = e.clientX -25 + "px";
        // document.querySelector(".cursor").style.top = e.clientY -25 + "px";

        let x = e.clientX -25 + "px";
        let y = e.clientY -25 + "px";
        document.querySelector(".cursor").style.cssText = "left:" + x + "; top:" + y;
    });

    document.querySelectorAll(".mouse_wrap span").forEach(span => { 
        let attr = span.getAttribute("class");           //mouse_wrap span에 있는 class값을 전부 다 가져와서 attr변수에 저장
      

        span.addEventListener("mouseover", () => {                          //mouse_wrap span에 마우스가 오버했을때
            document.querySelector(".cursor").classList.add(attr);          //atrr(class : css에 스타일 설정해둠)를 붙혀줌 class(style1, style2)가 붙으면 cursor스타일이 변함
        });
        
        span.addEventListener("mouseout", () => {
            document.querySelector(".cursor").classList.remove(attr);       //mouse_wrap span에 마우스가 아웃했을때 class를 지움
        });
    });

https://jowuseop1110.github.io/webs_class/javascript/effect/mouseEffect01.html