mousemove는 마우스 이벤트의 한종류로 마우스를 움직일 때 발생한다.
<html onclick="check()" onmousemove="check()">
CSS의 position으로 속성을 통해 문서상 요소배치하는 방법 지정
position 속성(요소의 최종위치 결정) : relative, absolute, fixed
absolute : 부모 요소를 기준으로 배치
기준점을 잡고 네가지 속성(top, bottom, left, right)을 이용해 요소의 위치를 옮길 수 있다.
<style>
img{position: absolute;}
</style>
마우스 이벤트는 좌표 정보를 제공한다.
클라이언트 좌표 : clientX, clientY
요소에서 마우스 버튼 클릭시 마우스 포인터 좌표 구하기
<script type="text/javascript">
function check(){
let x = event.clientX;
let y = event.clientY;
document.images[0].style.left = x + "px";
document.images[0].style.top = x + "px";
}
</script>
</head>
<body>
<img src="이미지 경로">
</body>
</html>
'💻공부 > JavaScript' 카테고리의 다른 글
| API 호출 (0) | 2023.05.18 |
|---|---|
| 동기 & 비동기 (0) | 2023.05.17 |
| setTimeout( )과 setInterval( ) 함수 (0) | 2022.09.22 |
| 내장 함수 : prompt( ) 함수 (0) | 2022.09.21 |
댓글