마우스 이펙트01

Accept challenges, so that you may feel the exhilaration of victory.

도전을 받아들여라. 그러면 승리의 쾌감을 맛볼 지도 모른다.

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

소스보기

mouse__info

mouse__cursor

mouse__cursor(for)

mouse__cursor(forEach)

{
    window.addEventListener("mousemove" , (event) => {
        document.querySelector(".clientX").innerHTML = event.clientX;
        document.querySelector(".clientY").innerHTML = event.clientX;
        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;
    });
    
    // 출력화면
    clientX 0px
    clientY 0px
    offsetX 0px
    offsetY 0px
    pageX 0px
    pageY 0px
    screenX 0px
    screenY 0px
 }

{
    // 선택자
    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", function(){
            mouseCursor.classList.add("s"+i);
        });
        document.querySelector(".s"+i).addEventListener("mouseout", function(){
            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));
        });
    })
}