전역좌표란?
최상위 노드인 문서(document)의 left:0, top:0 위치를 시작점으로 하는 위치 값을 의미
물고기들의 지역좌표와 전역좌표를 함께 표시하는 프로그램을 작성해본다.
전역 좌표는 해당 페이지 좌측 상단 끝을 기준으로 한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>물고기 위치 구하기</title>
<script src="../../js/jquery-3.5.1.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
#parent1 {
border: 1px solid black;
position: absolute;
width: 500px;
height: 400px;
left: 100px;
top: 100px;
}
#info {
border: 1px solid black;
position: absolute;
width: 500px;
height: 50px;
margin: 50px 0 0 100px;
}
.fish {
position: absolute;
width: 120px;
}
.fish p {
position: absolute;
margin-top: 20px;
text-align: center;
width: 100%;
}
#fish1 {
left: 50px;
top: 100px;
}
#fish2 {
left: 150px;
top: 200px;
}
#fish3 {
left: 180px;
top: 50px;
}
#fish4 {
left: 350px;
top: 200px;
}
#fish5 {
left: 50px;
top: 300px;
}
</style>
<script>
$(document).ready(function () {
var $info = $("#info");
$(".fish").click(function () {
var $targetFish = $(this);
var parentPos = $targetFish.offset();
var pos = $targetFish.position();
var str = "지역좌표 : id=" + $targetFish.attr("id") + ", left=" + pos.left + ", top=" + pos.top;
var str2 = "<br>전역좌표 : id=" + $targetFish.attr("id")+", left="+ parentPos.left + ", top=" + parentPos.top;
$info.html(str + str2);
})
});
</script>
</head>
<body>
<div id="info">
위치 값이 이 곳에 출력
</div>
<div id="parent1">
<div id="fish1" class="fish">
<p>1</p><img src="../../images/fish1.png">
</div>
<div id="fish2" class="fish">
<p>2</p><img src="../../images/fish1.png">
</div>
<div id="fish3" class="fish">
<p>3</p><img src="../../images/fish1.png">
</div>
<div id="fish4" class="fish">
<p>4</p><img src="../../images/fish1.png">
</div>
<div id="fish5" class="fish">
<p>5</p><img src="../../images/fish1.png">
</div>
</div>
</body>
</html>
728x90
반응형
'HTML > Javascript 기초' 카테고리의 다른 글
| [Javascript] HTML 요소의 크기 다루기 - 2 (0) | 2020.08.06 |
|---|---|
| [Javascript] HTML 요소의 크기 다루기 - 1 (0) | 2020.08.05 |
| [Javascript] 물고기들의 지역좌표 설정하기 (0) | 2020.08.05 |
| [Javascript] 물고기 지역좌표 구하기 (0) | 2020.08.05 |
| [Javascript] offsetParent 사용하기 (0) | 2020.08.05 |
