[JavaScript] 이미지를 방향키로 움직일 수 있고, 좌표가 표시됩니다.
<Html>
<HEAD>
<title>태그인넷 www.tagin.net</title>
<script language="javascript">
<!--
//********************************************************************
//* Please DO NOT delete this commant. *
//* *
//* Designed by Jason. *
//* e-mail address: yulbum@yahoo.com *
//* If you want to know about DHTML *
//* Come here: http://members.tripod.com/~dyhtml *
//* Thank you! *
//********************************************************************
function init() {
moving = mov.style
moving.xpos = parseInt(moving.left)
moving.ypos = parseInt(moving.top)
moving.move = 0
moving.move2 = 0
moving.move3 = 0
moving.move4 = 0
document.onkeydown = down
document.onkeyup = up
}
// moving the object when key down
function down() {
var code = window.event.keyCode
if (code == 39 && !moving.move) {
moving.move = 1
move();
}
if (code == 40 && !moving.move2) {
moving.move2 = 1
move2();
}
if (code == 37 && !moving.move3) {
moving.move3 = 1
move3();
}
if (code == 38 && !moving.move4) {
moving.move4 = 1
move4();
}
}
// stop moving the object when key up
function up() {
var code = window.event.keyCode
if (code == 39) {
moving.move = 0
}
if (code == 40) {moving.move2 = 0}
if (code == 37) {moving.move3 = 0}
if (code == 38) {moving.move4 = 0}
}
// Moving the object
function move() {
if (moving.move) {
moving.xpos += 5
moving.left = moving.xpos
setTimeout ("move()",30)
}
}
function move2() {
if (moving.move2) {
moving.ypos += 5
moving.top = moving.ypos
setTimeout ("move2()",30)
}
}
function move3() {
if (moving.move3) {
moving.xpos -= 5
moving.left = moving.xpos
setTimeout("move3()",30)
}
}
function move4() {
if (moving.move4) {
moving.ypos -= 5
moving.top = moving.ypos
setTimeout("move4()",30)
}
}
// position display
function s() {
view.innerHTML = "X: "+moving.xpos+" Y: "+moving.ypos
setTimeout ("s()",0)
}
//-->
</script>
</head>
<body onload="init();s()" link="#7C7EE2" vlink="#C9CAF3">
<p>방향키로 그림을 움직일 수 있습니다. www.tagin.net 태그인넷</p>
<div id="mov" style="position:absolute; left:20; width:25; top:50">
<img src="http://tagin.net/img/logo.gif" border="1"></div>
<div id="view" style="position:absolute; top:100;"></div>
<div id="back" style="position:absolute; top:150;"><a></div>
</body>
</html>
'프로그래밍 > HTML & JavaScript' 카테고리의 다른 글
| [javascript] 라디오버튼 클릭시 페이지 이동 (0) | 2015.01.27 |
|---|---|
| table 내용 엑셀로 저장하기 (0) | 2015.01.27 |
| 라디오버튼 클릭시 input 박스 활성화 시키기 (0) | 2015.01.27 |
| [javascript] 글자나 이미지에 마우스를 올리면 다른곳의 이미지가 변경 (0) | 2015.01.27 |
| [html] a 태그 밑줄 없애기 (0) | 2015.01.27 |
