Mouse Effect - 따라다니기

 

설명

마우스 좌표값에 따라 동그라미원의 좌표값이 변경되면서 마우스를 따라다니게 됩니다.

<script>
    //출력용 => 마우스좌표
    window.addEventListener("mousemove", (event) => {
        document.querySelector(".clientX").innerText = event.clientX;
        document.querySelector(".clientY").innerText = event.clientY;
        document.querySelector(".offsetX").innerText = event.offsetX;
        document.querySelector(".offsetY").innerText = event.offsetY;
        document.querySelector(".pageX").innerText = event.pageX;
        document.querySelector(".pageY").innerText = event.pageY;
        document.querySelector(".screenX").innerText = event.screenX;
        document.querySelector(".screenY").innerText = event.screenY;
    })

    //마우스 움직이기 --> 마우스 따라다니는 원의 반지름 만큼 픽셀을 빼주면 포인터 가운데로 옵니다.
    window.addEventListener("mousemove", (e) => {
        document.querySelector(".cursor").style.left = e.clientX - 25 + "px";		
        document.querySelector(".cursor").style.top = e.clientY - 25 + "px";
    });
    

    const style = document.querySelectorAll(".mouse__wrap span")    //마우스 오버효과 위치
    
    //for문으로 출력
    for(let i=0; i<style.length; i++){
        style[i].addEventListener("mouseover", () => {
            document.querySelector(".cursor").classList.add("style" + (i+1));
        });
        style[i].addEventListener("mouseout", () => {
            document.querySelector(".cursor").classList.remove("style" + (i+1));
        });
    }

    //forEach문으로 출력
    style.forEach((el, i) => {
        el.addEventListener("mouseover", () => {
            document.querySelector(".cursor").classList.add(`style${i+1}`);
        });
        el.addEventListener("mouseout", () => {
            document.querySelector(".cursor").classList.remove(`style${i+1}`);
        });
    });
</script&gt