728x90
300x250
SMALL
캐릭터를 마우스로 움직이게 하는 법
$character.css({
left:x축 이동 위치 값,
top:y축 이동 위치 값
});
캐릭터 위치 입력값 구하기
x축 위치 값 구하기 var x = parseInt($("#txtX").val());
y축 위치 값 구하기 var y = parseInt($("#txtY").val());
예를들어서 입력값이 100이라고 하면 이때 입력값이 숫자 문자열이기 때문에 숫자로 형변환을 해야 한다.
html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <div> <div id="panel"> <img src="character.png" id="character"> </div> <div id="nav"> <label>x값 입력 : </label> <input id="txtX"></input> <br> <label>y값 입력 : </label> <input id="txtY"> </input> <br> <button id="btnStart"> 캐릭터 움직이기 </button> </div> |
스크립트
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <script> $(document).ready(function() { // 캐릭터 노드 구하기. var $character = $("#character"); // 버튼에 클릭 이벤트 걸기. $("#btnStart").click(function() { // 1. 값 구하기 var x = parseInt($("#txtX").val()); var y = parseInt($("#txtY").val()); // 여기에 소스를 입력해주세요. // 2. 비교. if ((x >= 0 && x <= 500) && y >= 0 && y <= 300) { // 캐릭터 움직이기. $character.css({ left : x, top : y }); } else { alert("입력된 값이 너무 큽니다. 다시 입력해주세요."); } }); }) </script> |
먼저 위치를 옮길 캐릭터의 노드 값을 구한다.
버튼이 클릭되면 txtX에 입력된 값을 숫자로 변형하고 x y도 마찬가지
입력된 값이 영역보다 크면 경고창이 뜬다.
css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <style> body { font-size: 9pt; } #panel { width: 600px; height: 400px; border: 1px solid #999; position: relative; } #character { position: absolute; left: 50px; top: 120px; } #nav { text-align: center; width: 600px; } </style> |
728x90
반응형
LIST
'javaScript > JS Examples' 카테고리의 다른 글
| 1에서 10사이의 랜덤 수 생성하기 (0) | 2019.02.27 |
|---|---|
| 체크박스 만들기 (0) | 2019.02.25 |
| 로그인 처리 (0) | 2019.02.20 |
| 값을 입력받아 개체 움직이기 (0) | 2019.02.19 |
| .appendTo() 사용해서 코드 위치 이동시키기 요소 위치변경및 추가 (0) | 2019.02.10 |
댓글