지구본 움직이기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>함수-5(지구본 움직이기)</title>
<link rel="stylesheet" href="css/gigu.css">
<script src="libs/jquery-3.5.1.min.js"></script>
<script src="js/gigu.js"></script>
</head>
<body>
<div>
<div id="panel">
<img src="images/gigu.png" id="gigu">
</div>
<div id="nav">
<label>x값 입력 : </label>
<input id="txtX" />
<br/>
<label>y값 입력 : </label>
<input id="txtY" />
<br/>
<button id="btnStart">지구본 움직이기</button>
</div>
</div>
</body>
</html>
body{
font-size: 10pt;
}
#panel{
width: 600px;
height: 500px;
border: 1px solid #999;
position: relative;
}
#gigu {
position: absolute;
width: 80px;
left: 50px;
top : 120px;
}
#nav {
text-align: center;
width: 600px;
}
//전역변수로 선언
var $gigu = null;
$(document).ready(function() {
initialize();
event_gigu();
});
//전역변수를 초기화
function initialize() {
//지구본 찾기
$gigu = $("#gigu");
}
//이벤트와 관련된 내용을 함수로 등록
function event_gigu() {
//버튼에 이벤트 등록
$("#btnStart").click(function(){
//지구본 움직이기
//지구본 위치 값 구하기
var x = parseInt($("#txtX").val());
var y = parseInt($("#txtY").val());
moveGigu(x, y);
});
}
//지구본의 움직이는 기능을 구현해놓은 함수
function moveGigu(x, y){
if((x >= 0 && x <= 500) && (y >= 0 && y <= 300)){
$gigu.css({
left : x,
top : y
});
}
else {
alert("입력된 값이 범위를 벗어났습니다.");
}
}
댓글남기기