<div>
<p>마우스를 움직여보세요!</p>
<p id="direction"></p>
</div>
p {
font-size: 2rem;
font-weight: bold;
}
#direction {
font-size: 1.8rem;
font-weight: 500;
}
/* ----------- */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css");
* {
box-sizing: border-box;
font-family: Pretendard;
}
body {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
let prevX = 0, prevY = 0;
const $target = document.querySelector("#direction");
const getMouseDirection = (e) => {
const xDir = prevX <= e.pageX ? "right" : "left";
const yDir = prevY <= e.pageY ? "down" : "up";
prevX = e.pageX;
prevY = e.pageY;
$target.innerHTML = `좌우: ${xDir} 상하: ${yDir}`;
}
window.addEventListener("mousemove", getMouseDirection);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.