Mouse Effect01 - 따라다니기

SBDB_뉴유 2022. 2. 24. 20:37
//출력용
window.addEventListener("mousemove", () => {
    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.querySelector(".style1").addEventListener("mouseover", () => {
//     document.querySelector(".cursor").classList.add("style1")
// })
// document.querySelector(".style1").addEventListener("mouseout", () => {
//     document.querySelector(".cursor").classList.remove("style1")
// })
// document.querySelector(".style2").addEventListener("mouseover", () => {
//     document.querySelector(".cursor").classList.add("style2")
// })
// document.querySelector(".style2").addEventListener("mouseout", () => {
//     document.querySelector(".cursor").classList.remove("style2")
// })
// document.querySelector(".style3").addEventListener("mouseover", () => {
//     document.querySelector(".cursor").classList.add("style3")
// })
// document.querySelector(".style3").addEventListener("mouseout", () => {
//     document.querySelector(".cursor").classList.remove("style3")
// })
// document.querySelector(".style4").addEventListener("mouseover", () => {
//     document.querySelector(".cursor").classList.add("style4")
// })
// document.querySelector(".style4").addEventListener("mouseout", () => {
//     document.querySelector(".cursor").classList.remove("style4")
// })
// document.querySelector(".style5").addEventListener("mouseover", () => {
//     document.querySelector(".cursor").classList.add("style5")
// })
// document.querySelector(".style5").addEventListener("mouseout", () => {
//     document.querySelector(".cursor").classList.remove("style5")
// })
// document.querySelector(".style6").addEventListener("mouseover", () => {
//     document.querySelector(".cursor").classList.add("style6")
// })
// document.querySelector(".style6").addEventListener("mouseout", () => {
//     document.querySelector(".cursor").classList.remove("style6")
// })

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

//forEach
document.querySelectorAll(".mouse__wrap span").forEach((span, index) => {
    span.addEventListener("mouseover", () => {
        document.querySelector(".cursor").classList.add("style"+(index+1));
    });
    span.addEventListener("mouseout", () => {
    document.querySelector(".cursor").classList.remove("style"+(index+1));
    });
});

//getAttribute() 요소 속성 가져오기
//span에 마우스 오버 했을 떄 속성값을 alert()
document.querySelectorAll(".mouse__wrap span").forEach(span => {
    let attr = span.getAttribute("class");
    span.addEventListener("mouseover", () => {
        // alert(attr)
    })
})