프리카운터넷

프로그래밍&개발

기존 공부방

창의 위치를 이동 시키는 방법을 간단한 예제를 통하여 알아 봅시다 ^^

* window.moveBy(가로,세로)
가로: 현재 위치에서 넣어준 값만큼 가로로 움직인다
세로: 현재 위치에서 넣어준 값만큼 세로로 움직인다

* 예)
window.moveBy(100,100) : 현재위치에서 오른쪽 아래로 100 만큼 움직인다.
window.moveBy(-100,-100) : 현재위치에서 왼쪽 위로 100 만큼 움직인다.
window.moveBy(100,0) : 현재위치에서 오른쪽으로 100 만큼 움직인다.

* 자바스크립트를 이용하여 창이 움직이는 애니메이션(?)을 구현 할 수 있다 ^^


	[소스] <style type="text/css"> <!-- .btn1{font-weight:bold; font-size:9pt; width:50 ; height:50} //--> </style> <script language="JavaScript"> <!-- var move_x = 0 var move_y = 0 var moves = 5 //한번에 움직이는 거리(픽셀) function gogo(){ window.moveBy(move_x,move_y) move_x=0 move_y=0 } //초간단 소스 //moveBy는 현재창을 상대값으로 이동시켜 준다. //현재 위치에서 +1 -1 이런식으로.. //--> </script></p> <table border="0" align="center" cellspacing="0" cellpadding="5"> <tr> <td> <p><input type="button" value="↖" onclick="move_x=-moves;move_y=-moves;gogo()" class="btn1"></p> </td> <td> <p><input type="button" value="↑" onclick="move_y=-moves;gogo()" class="btn1"></p> </td> <td> <p><input type="button" value="↗" onclick="move_x=moves;move_y=-moves;gogo()" class="btn1"></p> </td> </tr> <tr> <td> <p><input type="button" value="←" onclick="move_x=-moves;gogo()" class="btn1"></p> </td> <td> </td> <td> <p><input type="button" value="→" onclick="move_x=moves;gogo()" class="btn1"></p> </td> </tr> <tr> <td> <p><input type="button" value="↙" onclick="move_x=-moves;move_y=moves;gogo()" class="btn1"></p> </td> <td> <p><input type="button" value="↓" onclick="move_y=moves;gogo()" class="btn1"></p> </td> <td> <p><input type="button" value="↘" onclick="move_x=moves;move_y=moves;gogo()" class="btn1"></p> </td> </tr> </table>