1. 자바스크립트를 이용하여 div를 이동하는 스크립트를 작성해 보자
-------------------------------- <소 스> ----------------------------------
<style type="text/css">
#div1 {
background-color :#00f;
color:#fff;
width:100px;
height:100px;
position:absolute;
left : 0px;
top : 0px;
}
</style>
<script type="text/javascript">
var x = 0;
var y = 0;
function moveLeft() {
x -= 20;
var obj = document.getElementById('div1');
obj.style.left = x + 'px'; // px는 스타일시트 단
}
function moveRight() {
x += 20;
var obj = document.getElementById('div1');
obj.style.left = x + 'px'; // px는 스타일시트 단
}
function moveUp() {
y -= 20;
var obj = document.getElementById('div1');
obj.style.top = y + 'px'; // px는 스타일시트 단
}
function moveDown() {
y += 20;
var obj = document.getElementById('div1');
obj.style.top = y + 'px'; // px는 스타일시트 단
}
</script>
</head>
<body>
<div id="div1">
this is div
</div>
</body> <style type="text/css"> #div1 { background-color :#00f; color:#fff; width:100px; height:100px; position:absolute; left : 0px; top : 0px; } </style> <script type="text/javascript"> var x = 0; var y = 0; function moveLeft() { x -= 20; var obj = document.getElementById('div1'); obj.style.left = x + 'px'; // px는 스타일시트 단 } function moveRight() { x += 20; var obj = document.getElementById('div1'); obj.style.left = x + 'px'; // px는 스타일시트 단 } function moveUp() { y -= 20; var obj = document.getElementById('div1'); obj.style.top = y + 'px'; // px는 스타일시트 단 } function moveDown() { y += 20; var obj = document.getElementById('div1'); obj.style.top = y + 'px'; // px는 스타일시트 단 } function main() { var obj_u = document.getElementById('btn_up'); var obj_l = document.getElementById('btn_left'); var obj_r = document.getElementById('btn_right'); var obj_d = document.getElementById('btn_down'); obj_u.addEventListener('click', moveUp, false); obj_l.addEventListener('click', moveLeft, false); obj_r.addEventListener('click', moveRight, false); obj_d.addEventListener('click', moveDown, false); } window.onload = main; </script> </head> <body> <div id="div1"> this is div </div> <div id='control' style="left:300px; top:300px; position:absolute"> <form name="move"> <input type="button" id="btn_up" value="top"><br/> <input type="button" id="btn_left" value="left"> <input type="button" id="btn_right" value="right"><br/> <input type="button" id="btn_down" value="down"> </form> </div>
------------------------------------------------------------------------
키에 관련한 이벤트를 넣지 않아서 실제적으로 작동은 하지 않지만
사파리, 크롬등의 개발자모드 콘솔창에서 해당 함수를 실행하면, 브라우저에서 이동을 확인 할 수 있다.
2. 자 이제 버튼을 달아서 직접 움직여보자
-------------------------------- <소 스> ----------------------------------
<결 과>
'IT 관련 > Html5' 카테고리의 다른 글
| 아이폰 브라우저에 CSS적용해 보기 (0) | 2011.10.08 |
|---|---|
| CSS 적용 방법 (0) | 2011.10.08 |
| 유용한 즐겨찾기 (0) | 2011.10.07 |
| JavaScript와 CSS의 만남1 (객체의 색상 변경) (0) | 2011.10.07 |
| Java Script의 객체지향 (0) | 2011.10.07 |