Показать сообщение отдельно
  #1 (permalink)  
Старый 28.04.2014, 14:02
Новичок на форуме
Отправить личное сообщение для Gera Herbst Посмотреть профиль Найти все сообщения от Gera Herbst
 
Регистрация: 28.04.2014
Сообщений: 8

Нужно повесить событие на несколько элементов
Господа, задача проста, но никак мне не удается с ней справиться.

Суть: маленький шарик движется по эллипсу вокруг большого. В ф-юю передаю параметры для эллипса (угловую скорость, коорд-ы центра и т.д.).

Задача: добавить еще один маленький шарик, который будет двигаться по эллипсу, но с другими параметрами. Т.е. будет два шарика, вращающихся вокруг другого.

Вот код (шарик неподвижный добавила):

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


Заранее благодарю.

Последний раз редактировалось devote, 28.04.2014 в 14:48. Причина: Форматирование кода
Ответить с цитированием