Mouse Effect 01 - 따라다니기

 

 

{
  //출력용 화면에 X,Y값들을 마우스가 움직일때마다 나타나게 출력
          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;   //cursor에 style.csstext로 left : x  top : y 설정
          })

         


        //   document.querySelector(".style1").addEventListener("mouseover", ()=> {    //마우스를 올리면 style1 추가
        //     document.querySelector(".cursor").classList.add("style1");
        //   })
        //   document.querySelector(".style1").addEventListener("mouseout", ()=> {     //마우스 떼면 style1 삭제
        //     document.querySelector(".cursor").classList.remove("style1");
        //   })

        //   document.querySelector(".style2").addEventListener("mouseover", ()=> {    //마우스를 올리면 style2 추가
        //     document.querySelector(".cursor").classList.add("style2");
        //   })
        //   document.querySelector(".style2").addEventListener("mouseout", ()=> {     //마우스 떼면 style2 삭제
        //     document.querySelector(".cursor").classList.remove("style2");
        //   })

        //   document.querySelector(".style3").addEventListener("mouseover", ()=> {    //마우스를 올리면 style3 추가
        //     document.querySelector(".cursor").classList.add("style3");
        //   })
        //   document.querySelector(".style3").addEventListener("mouseout", ()=> {     //마우스 떼면 style3 삭제
        //     document.querySelector(".cursor").classList.remove("style3");
        //   })
          
        //   document.querySelector(".style4").addEventListener("mouseover", ()=> {    //마우스를 올리면 style4 추가
        //     document.querySelector(".cursor").classList.add("style4");
        //   })
        //   document.querySelector(".style4").addEventListener("mouseout", ()=> {     //마우스 떼면 style4 삭제
        //     document.querySelector(".cursor").classList.remove("style4");
        //   })

        //   document.querySelector(".style5").addEventListener("mouseover", ()=> {    //마우스를 올리면 style5 추가
        //     document.querySelector(".cursor").classList.add("style5");
        //   })
        //   document.querySelector(".style5").addEventListener("mouseout", ()=> {     //마우스 떼면 style5 삭제
        //     document.querySelector(".cursor").classList.remove("style5");
        //   })

        //   document.querySelector(".style6").addEventListener("mouseover", ()=> {    //마우스를 올리면 style6 추가
        //     document.querySelector(".cursor").classList.add("style6");
        //   })
        //   document.querySelector(".style6").addEventListener("mouseout", ()=> {     //마우스 떼면 style6 삭제
        //     document.querySelector(".cursor").classList.remove("style6");
        //   })

	//위에거를 for문으로 
    // for(let i=1; i<=6; i++){	
            //     document.querySelector(".style" +i).addEventListener("mouuseover", ()=>{
            //         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", ()=>{
                document.querySelector(".cursor").classList.add(attr);
            });
            span.addEventListener("mouseout", ()=>{
                document.querySelector(".cursor").classList.remove(attr);
            })
        })
}