마우스 이펙트01

Think like a man of action and act like man of thought.

행동하는 사람처럼 생각하고, 생각하는 사람처럼 행동하라.

clientX 0px
clientY 0px
offsetX 0px
offsetY 0px
pageX 0px
pageY 0px
screenX 0px
screenY 0px

소스 보기

Javascript

{
    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;
    })

    // 선택자
    const mouseCursor = document.querySelector(".mouse__cursor");

    // 마우스 좌표 값을 커서 할당
    window.addEventListener("mousemove", (e) => {
        mouseCursor.style.left = e.clientX - 25 + "px";
        mouseCursor.style.top = e.clientY - 25 + "px";
    })

    // for문
    // for(let i=1; i<=8; i++){
    //     document.querySelector(".s"+i).addEventListener("mouseover", () => {
    //     mouseCursor.classList.add("s"+i);
    //     })
    //     document.querySelector(".s"+i).addEventListener("mouseout", () => {
    //         mouseCursor.classList.remove("s"+i);
    //     })
    // }

    // forEach문
    document.querySelectorAll(".mouse__text span").forEach((span, num) => {
        span.addEventListener("mouseover", () => {
            mouseCursor.classList.add("s" + (num + 1));
        });
        span.addEventListener("mouseout", () => {
            mouseCursor.classList.remove("s" + (num + 1));
        });
    });
}