티스토리 뷰

java,web study/6주차 (8월 5일~8월 11일)

자바스크립트로 지구 공전 애니메이션 만들기

doublemetal 2013. 8. 8. 10:30

<!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>

example

●

○

*

'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
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/08   »
일 월 화 수 목 금 토
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 29 30
31
글 보관함