Mouse Effect - getAttribute

	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";

            let x = e.clientX -25 + "px";
            let y = e.clientY -25 + "px";
            document.querySelector(".cursor").style.cssText = "left:" + x +"; top:" + y;
        });
   		//getAttribute
        //span 마우스 오버 했을 때 속성값 alert()
        document.querySelectorAll(".mouse__wrap span").forEach(span => {
            let attr = span.getAttribute("class");

            span.addEventListener("mouseover", () => {
                document.querySelector(".cursor").classList.add(attr);
            });
            span.addEventListener("mouseout", () => {
                document.querySelector(".cursor").classList.remove(attr);
            })
        }
        
        // 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));
        //     })
        // })

 

자바스크립트로 마우스 효과(mouse effect)를 주는 사이트 입니다.

마우스가 움직일때마다 마우스 이벤트 속성들의 좌표값을 보여주도록 하였고 

가운데 명언글 강조된 글자마다 효과를 넣어 getAttribute을 사용하여 선택한 클래스의 값을 가져오도록 했습니다.

 

 

마우스 이펙트