마우스 따라 다니는 스크립트 질문입니다.
본문
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>onmousemove</title>
<script>
function makeCursor() {
document.onmousemove = function(e) {
var div = document.getElementById("div");
div.style.left = event.clientX + "px"; // 단위 "px"를 꼭 붙여야 함
div.style.top = event.clientY + "px";
}
}
</script>
</head>
<body onload="makeCursor()">
<h3>이미지 커서 만들기</h3>
<hr>
<p id="p">마우스를 움직이면 이미지로 만든 커서가 마우스를 따라 다닙니다</p>
<div id="div" style="top:123px;left:123px;position: absolute;">
<img src="pen1.png" width="150px" height="300px">
</div>
</body>
</html>
위에 소스대로 마우스에 이미지가 잘 따라 다니는데요 그 이미지 위치를 변경할수가 있나요??
https://henry7113.cafe24.com/pen_test.php
여기 테스트중인 페이지입니다.
여기 페이지에 보시면 마우스 포인터가 상단에 올라가 있습니다.
이것을 아래 그림처럼 옮길수 있을가요? ㅠㅠ
답변 1
<script>
function makeCursor() {
document.onmousemove = function(e) {
var div = document.getElementById("div");
div.style.left = event.clientX - 30 + "px"; // 단위 "px"를 꼭 붙여야 함
div.style.top = event.clientY - div.offsetHeight + "px";
}
}
</script>
와 잘되네요 너무 감사합니다.
답변을 작성하시기 전에 로그인 해주세요.
