01.04.2013, 13:32
|
Интересующийся
|
|
Регистрация: 01.04.2013
Сообщений: 20
|
|
Движение на java script
Ребят кому не сложно, поделитесь ссылкой.
Может кто видел в сети скрипт позволяющий реализовать движение одного объекта вокруг другого. Что-то вроде движения спутника вокруг планеты, но выглядеть это должно как в 3d пространстве, тоесть при движение, некоторое время объект виден, потом скрывается (к примеру за планетой), и через определенный промежуток времени, снова становиться виден. Но это должен быть не flash.
|
|
01.04.2013, 15:18
|
Интересующийся
|
|
Регистрация: 01.04.2013
Сообщений: 20
|
|
<html>
<head>
<style type="text/css">
#block {
position: absolute;
background-color: red;
width: 100px;
height: 80px;
color: white;
}
</style>
</head>
<body>
<div id="block">Наш блок</div>
<script type="text/javascript">
var obj = document.getElementById("block");
var i = 0;
/**
Функция moveBlock будет запускаться каждые 10 миллсекунд
**/
function moveBlock() {
obj.style.left = i;
obj.style.top = i;
i++;
}
//Каждые 5000 миллисекунд запускаем функцию test (5 секунд, 5000 миллисекунд)
setInterval(moveBlock, 10);
</script>
</body>
</html>
Идейка с z-index появилась, в сети нашел это скрипт, но вот беда, срабатывает он только в том случая когда отсутствует доктайп, стоит его только добавить и конструкция перестает работать.
Последний раз редактировалось Malsim, 03.04.2013 в 18:15.
|
|
01.04.2013, 15:27
|
Интересующийся
|
|
Регистрация: 01.04.2013
Сообщений: 20
|
|
Благодарю)
|
|
01.04.2013, 15:42
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,205
|
|
Сообщение от Malsim
|
Идейка с z-index появилась, в сети нашел это скрипт, но вот беда, срабатывает он только в том случая когда отсутствует доктайп, стоит его только добавить и конструкция перестает работать.
|
Значит не правильно используешь z-index...
|
|
01.04.2013, 17:20
|
Интересующийся
|
|
Регистрация: 01.04.2013
Сообщений: 20
|
|
Нашел на мой взгляд наиболее подходящее решение.
Все это дело выглядит следующим образом. Помогите допилить.
Необходимо что бы z-index у img с id "luna" становился отрицательным в определенный момент анимации.
Пробывал дописать if (omega>0.045) {obj.style.zIndex=(-10);} else {obj.style.zIndex=(10);}; где omega это время всей анимации, но ничего не вышло((
<!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>
var x0=200,y0=250; // центр эллипса
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(x0,y0,document.getElementById('alpha0').value,document.getElementById('a1').value,document.getElementById('b1').value,document.getElementById('omega1').value)",100)
}
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";
}
</script>
<head>
<body
onload="ellipse('luna','planeta',x0,y0,document.getElementById('alpha0').value,document.getElementById('a1').value,document.getElementById('b1').value,document.getElementById('omega1').value)">
<img id="planeta" src="planeta.png" style="position:absolute;top:200px;left:120px; width: 200px;"/>
<img id="luna" src="sputnik.png" style="position:absolute;top:300px;left:190px; width: 30px;"/>
<h2>Движение по эллипсу</h2>
<h3>Параметры:</h3>
<input id="alpha0" type="text" value=0 size=4/>
угол наклона эллипса, град.(альфа)<br/>
<input id ="a1" type ="text" value=140 size=4/>
большая полуось (a) <br/>
<input id ="b1" type ="text" value=40 size=4/>
малая полуось (b) <br/>
<input id ="omega1" type ="text" value=0.09 size=4/>
угловая скорость (омега)
</body>
</html>
Последний раз редактировалось Malsim, 03.04.2013 в 18:16.
|
|
02.04.2013, 03:26
|
|
Профессор
|
|
Регистрация: 11.09.2010
Сообщений: 8,804
|
|
1) Будешь выкладывать здесь неотформатированный код - боженька накажет - зашлет тебе вирусов на комп.
2) Понятно что это - прототип. Но черт, мне было бы стыдно показывать людям такой засранный код. Причеши немного.
3) Решение "в лоб". Наверно можно сделать лучше.
<!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>
var x0=200,y0=250; // центр эллипса
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(x0,y0,document.getElementById('alpha0').value,document.getElementById('a1').value, document.getElementById('b1').value,document.getElementById('omega1').value)",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{border-radius: 100%;background: blue;height: 200px;}
#luna{border-radius: 100%;background: gray;height:
30px}
</style>
<head>
<body
onload="ellipse('luna','planeta',x0,y0,document.getElementById('alpha0').value,document.getElementById('a1').value,document.getElementById('b1').value ,document.getElementById('omega1').value)">
<div id="planeta" style="position:absolute;top:200px;left:120px; width: 200px;"></div>
<div id="luna" style="position:absolute;top:300px;left:190px; width: 30px;"></div>
<h2>Движение по эллипсу</h2>
<h3>Параметры:</h3>
<input id="alpha0" type="text" value=0 size=4/>
угол наклона эллипса, град.(альфа)<br/>
<input id ="a1" type ="text" value=140 size=4/>
большая полуось (a) <br/>
<input id ="b1" type ="text" value=40 size=4/>
малая полуось (b) <br/>
<input id ="omega1" type ="text" value=0.01 size=4/>
угловая скорость (омега)
</body>
</html>
Последний раз редактировалось danik.js, 02.04.2013 в 03:29.
|
|
02.04.2013, 08:29
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,205
|
|
Сообщение от Malsim
|
Необходимо что бы z-index у img с id "luna" становился отрицательным в определенный момент анимации.
|
Про отрицательный это сильно! Закончились натуральные числа?
У тебя меняется угол - вот его и нанализируй...
|
|
02.04.2013, 11:22
|
Интересующийся
|
|
Регистрация: 01.04.2013
Сообщений: 20
|
|
Форматирование подразумевает добавление отступов, для улучшения читабельности иерархии вложенности тегов?) я правильно понимаю?)
|
|
|
|