책에 있는 소스를 그대로 적용하기는 그래서 약간 수정해보았다. 수정이라기보다 쪼개보았다. 재활용 가능하게...
<!DOCTYPE html>
<html>
<head>
<script>
function getRealOffsetLeft(o){
return o ? o.offsetLeft + getRealOffsetLeft(o.offsetParent) : 0;
}
function getRealOffsetTop(o){
return o ? o.offsetTop + getRealOffsetTop(o.offsetParent) : 0;
}
function Rotation(tagName, speed, chRadius, radius, centerTagName){
var movingTag = document.getElementById(tagName);
var centerTag = document.getElementById(centerTagName);
movingTag.style.position = 'absolute';
var angle = 0;
setInterval(function(){
// 이동 좌표 구하기
var centerTagLeft = getRealOffsetLeft(centerTag);
var centerTagTop = getRealOffsetTop(centerTag);
var tagLeft = centerTagLeft + ( radius * Math.cos(angle));
var tagTop = centerTagTop + ( radius * Math.sin(angle));
// 위치 이동
movingTag.style.left = tagLeft + 'px';
movingTag.style.top = tagTop + 'px';
// 각도 변경
angle += chRadius;
}, speed);
}
window.onload = function () {
var sun = document.getElementById('sun');
sun.style.position = 'absolute';
sun.style.left = 250 + 'px';
sun.style.top = 200 + 'px';
Rotation( 'earth', 1000/5, 0.1, 150, 'sun');
Rotation( 'moon', 1000/5, 0.3, 50, 'earth');
};
</script>
</head>
<body>
<h1 id="sun">@</h1>
<h1 id="earth">O</h1>
<h1 id="moon">*</h1>
</body>
</html>
문제점: 첫번째 원은 괜찮으나, 원을 도는 객체에 다시 원을 돌리면 정확한 위치로 돌지 않는다. 아마도 두 회전간 싱크가 맞지않아서 그런듯하다. 배열로해서 처리하면 깔끔하게 처리가 가능하겠으나 계속 추가하면 끝이 없으므로 여기까지... ㅋ
'Javascript' 카테고리의 다른 글
| 스크립트로 form 관리 (0) | 2012.07.20 |
|---|---|
| 문서 객체와 객체지향을 이용한 움직임 구현 (0) | 2012.07.09 |
| 문서 객체를 배열로 가져오기 (0) | 2012.07.09 |
| IE에서 innerHTML로 내용을 바꿀 수 없는 태그들 (0) | 2012.07.06 |
| BOM(Brower Object Model: 브라우저 객체 모델) (0) | 2012.07.06 |