jquery에서 좌표 실시간으로 노출시키는 방법이 궁금합니다.
본문
아래는 자바스크립트 소스이구요
innerHTML으로 실시간 clientx,y 좌표가 노출됩니다.
<script>
window.onload = init;
function init(){
var map = document.getElementById("map");
map.onmousemove = showCoords;
}
window.onload = init;
function init(){
var map = document.getElementById("map");
map.onmousemove = showCoords;
}
function showCoords(eventObj) {
var coords = document.getElementById("coords");
var x = eventObj.clientX;
var y = eventObj.clientY;
coords.innerHTML = "지도 좌표 : " + x +" , "+ y
}
</script>
</head>
<body>
<img id="map" src="map.jpg" />
<p id="coords">
지도 위에서 마우스를 움직여 좌표를 찾으세요
</p>
var coords = document.getElementById("coords");
var x = eventObj.clientX;
var y = eventObj.clientY;
coords.innerHTML = "지도 좌표 : " + x +" , "+ y
}
</script>
</head>
<body>
<img id="map" src="map.jpg" />
<p id="coords">
지도 위에서 마우스를 움직여 좌표를 찾으세요
</p>
아래는 jquery 소스입니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title> </title>
<style>
* {
margin: 0;
padding: 0;
}
body {
font-size: 9pt;
}
#info {
border: 1px solid #000;
height: 120px;
margin: 50px 0 0 100px;
width: 500px;
}
#parent1 {
border: 1px solid #000;
position: absolute;
width: 500px;
height: 400px;
left: 100px;
top: 200px;
}
#fish {
position: absolute;
padding: 30px;
margin: 50px;
left: 50px;
top: 100px;
border: 20px solid #f00;
}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>
/*
예제07:
실행화면처럼 물고기($fish)의 기본크기, 기본크기+padding 영역 크기,
기본크기+padding+border 영역 크기, 기본크기+padding+border+margin 영역 크기
그리고 지역 위치와 전역 위치를 각각 출력해 주세요.
*/
window.onload = function() {
// #info 찾기
var $info = $("#info");
// #fish 찾기
var $fish = $("#fish");
// 여기에 코드를 입력해주세요.
//지역 좌표 위치 값 구하기
var localPos = $fish.position();
var str ="지역 좌표 left="+localPos.left+", top="+localPos.top+"<br />";
var globalPos = $fish.offset();
str+="전역 좌표 left="+globalPos.left+", top="+globalPos.top;
$info.html($info.html()+str);
$info.innerHTML = "지도 좌표 : " + localPos +" , "+ globalPos
};
</script>
</head>
<body>
<div id="info">
(paddin=30px, border=20px, margin=50px)
<br>
</div>
<div id="parent1">
<img src="fish.png" id="fish">
</div>
</body>
</html>
답변 1
자바스크립트이 마우스 이벤트를 공부해 보시면 됩니다.
clientX, clientY, movementX, movementY 등 다양한 이벤트 값을 처리하면 어떤 위치도 알아 낼수가 있습니다.
답변을 작성하시기 전에 로그인 해주세요.
