<!DOCTYPE html>
<html>
<head><title>Движение по эллипсу</title>
<link rel="stylesheet" href="css/docs.css" type="text/css" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css">body {background:white}</style>
</head>
<script>
function ellipse(xid,x0,y0,alpha,a,b,omega) {
var as=Math.sin(alpha*Math.PI/180);
var ac=Math.cos(alpha*Math.PI/180);
//omega - угловая скорость, знак задает направление вращения
var x=a*Math.cos(omega*t); // начальное положение на эллипсе
var y=b*Math.sin(omega*t);
var t = 0;
var dt = 5; // приращение времени
var obj = document.getElementById(xid);
function move() {// пересчет координат, вызывается из ellipse()
t=t+dt;
// x,y - координаты в собственной системе координат
var x=a*Math.cos(omega*t);
var y=b*Math.sin(omega*t);
var as=Math.sin(alpha*Math.PI/180);
var ac=Math.cos(alpha*Math.PI/180);
obj.style.top=(-x*as+y*ac+y0)+"px"; // переход в экранную систему координат
obj.style.left=(x*ac+y*as+x0)+"px";
obj.style.zIndex = y < 0 ? -1 : 1;
}
obj.style.top=(-x*as+y*ac+y0)+"px";
obj.style.left=(x*ac+y*as+x0)+"px";
setInterval(move, 20);
}
</script>
<style>
#planeta,#planeta1{border-radius: 100%;background: blue;height: 200px;}
#luna,#luna1{border-radius: 100%;background: gray;height:
30px}
</style>
<head>
<body onLoad="ellipse('luna',200 ,250 ,0 ,140 ,40 ,0.01); ellipse('luna1',200 ,290 ,0 ,190 ,60 ,0.01);">
<div id="planeta" style="position:absolute;top:200px;left:120px; width: 200px;"></div>
<div id="luna" style="position:absolute;top:230px;left:335px; width: 30px;"></div>
<div id="luna1" style="position:absolute;top:330px;left:335px; width: 30px;"></div>
</body>
</html>