티스토리 뷰
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>example</title>
<script type="text/javascript">
window.onload = function(){
//문서 객체를 가져오고 설정
var sun = document.getElementById('sun');
var earth = document.getElementById('earth');
var moon = document.getElementById('moon');
sun.style.position = 'absolute';
earth.style.position = 'absolute';
moon.style.position = 'absolute';
sun.style.left = 250 + 'px';
sun.style.top = 200 + 'px';
var earthAngle = 0;
var moonAngle = 0;
//애니메이션 시작
setInterval(function(){
//각도를 사용해 지구와 달의 좌표를 구함
var earthLeft = 250 + 150 * Math.cos(earthAngle);
var earthTop = 200 + 150 * Math.sin(earthAngle);
var moonLeft = earthLeft + 50 * Math.cos(moonAngle);
var moonTop = earthTop + 50 * Math.sin(moonAngle);
//위치 이동
earth.style.left = earthLeft + 'px';
earth.style.top = earthTop +'px';
moon.style.left = moonLeft +'px';
moon.style.top = moonTop +'px';
//각도를 변경
earthAngle +=0.1;
moonAngle +=0.3;
},1000/30);
}
</script>
</head>
<body>
<h1 id="sun">●</h1>
<h1 id="earth">○</h1>
<h1 id="moon">*</h1>
</body>
</html>
●
○
*
'java,web study > 6주차 (8월 5일~8월 11일)' 카테고리의 다른 글
| 130808 실습코드 (0) | 2013.08.08 |
|---|---|
| 미쳐날뛰는 글자 (0) | 2013.08.08 |
| 130807 실습코드 (0) | 2013.08.08 |
| BOM (자재명세서) (0) | 2013.08.06 |