Нужно повесить событие на несколько элементов
Господа, задача проста, но никак мне не удается с ней справиться.
Суть: маленький шарик движется по эллипсу вокруг большого. В ф-юю передаю параметры для эллипса (угловую скорость, коорд-ы центра и т.д.). Задача: добавить еще один маленький шарик, который будет двигаться по эллипсу, но с другими параметрами. Т.е. будет два шарика, вращающихся вокруг другого. Вот код (шарик неподвижный добавила):
<!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);
dt=5; // приращение времени
t=0;
//omega - угловая скорость, знак задает направление вращения
var x=a*Math.cos(omega*t); // начальное положение на эллипсе
var y=b*Math.sin(omega*t);
obj=document.getElementById(xid);
obj.style.top=(-x*as+y*ac+y0)+"px";
obj.style.left=(x*ac+y*as+x0)+"px";
setInterval("move(200,250,0,140,40,0.01)",20);
}
function move(x0,y0,alpha,a,b,omega)// пересчет координат, вызывается из 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;
}
</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);">
<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>
Заранее благодарю. |
<!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>
|
Огромное Вам спасибо! Оперативненько)
|
| Часовой пояс GMT +3, время: 03:01. |