mouseEffect01

mouseEffect01

마우스 이펙트01번 입니다. 동그라미를 마우스 포인터로 바꾸어 색이 입혀진 단어에 따라서 모양이 바뀌는 마우스 이벤트를 확인해보세요.
마우스를 움직일때마다 바뀌는 위치값 js도 보실래요..?

---

원본 소스 보기 원본 사이트 보기

HTML

마우스의 위치값을 표현할 마우스 이벤트 속성들의 정보와, 명언을 한글/영어 버전으로 준비했습니다.

<section id="mouseType">
    <div class="mouse__cursor"></div>
    <div class="mouse__wrap">
        <p>He that can have <span class="style1">patience</span> can <span class="style2">have what</span> he
            <span class="style3">will</span>
        </p>
        <p><span class="style4">인내를</span> 가질 수 있다면 하려는 <span class="style5">모든 일</span>을 <span
                class="style6">해낼 수 있을 것이다.</span></p>
    </div>
</section>

<div class="mouse__info">
    <ul>
        <li>clientX : <span class="clientX">0</span>px</li>
        <li>clientY : <span class="clientY">0</span>px</li>
        <li>offsetX : <span class="offsetX">0</span>px</li>
        <li>offsetY : <span class="offsetY">0</span>px</li>
        <li>pageX : <span class="pageX">0</span>px</li>
        <li>pageY : <span class="pageY">0</span>px</li>
        <li>screenX : <span class="screenX">0</span>px</li>
        <li>screenY : <span class="screenY">0</span>px</li>
    </ul>
</div>
</main>

JAVASCRIPT

마우스 이벤트 속성을 각 클래스명에 innerHTML해주어 이벤트를 실행시킵니다.
커서 모양(원형)의 중앙이 커서 끝과 일치하도록 해줍니다.
forEach문을 사용하여 명언의 span 태그에 클래스 mouseover, mouseout 이벤트 속성을 추가/삭제해줍니다.

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 cursor = document.querySelector(".mouse__cursor");

window.addEventListener("mousemove", (e) => {

    cursor.style.left = e.clientX - 25 + "px";
    cursor.style.top = e.clientY - 25 + "px";
});

document.querySelectorAll(".mouse__wrap span").forEach(span => {
    let attr = span.getAttribute("class");

    span.addEventListener("mouseover", () => {
        cursor.classList.add(attr);
    });
    span.addEventListener("mouseout", () => {
        cursor.classList.remove(attr);
    });
});