Javascript.RU

Rotation

Rotation

Часто встречаю rotation, сделанный на flash.
Попробовал сделать на javascript.

Надо ещё надо доделать.

Скажите, пожалуйста, Ваше мнение.

В действии

<script>
window.onload = function(){
function $(id){return document.getElementById(id);}
function int(value){return parseInt(value);}
function sin(value){return Math.sin(value);}
function cos(value){return Math.cos(value);}

var velocity=0.001,
	x0=200,y0=200, // центр эллипса
	alpha=0,
	a=200,
	b=100,
	img1=$('img1'),
	img2=$('img2'),
	img3=$('img3'),
	img4=$('img4'),
	pi=Math.PI;
	
	
(function car(){	
	alpha+=velocity;
	
	img1.style.top=int(x0+b*cos(alpha));
	img1.style.left=int(x0+a*sin(alpha));
	
	img2.style.top=int(x0+b*cos(alpha+pi/2));
	img2.style.left=int(x0+a*sin(alpha+pi/2));
	
	img3.style.top=int(x0+b*cos(alpha+pi));
	img3.style.left=int(x0+a*sin(alpha+pi));
	
	img4.style.top=int(x0+b*cos(alpha+pi*1.5));
	img4.style.left=int(x0+a*sin(alpha+pi*1.5));	
	
	img1.getElementsByTagName('IMG')[0].style.width=50 + 80*(int(img1.style.top)/300);
	img1.getElementsByTagName('IMG')[0].style.height=35 + 55*(int(img1.style.top)/300);
	
	img2.getElementsByTagName('IMG')[0].style.width=50 + 80*(int(img2.style.top)/300);
	img2.getElementsByTagName('IMG')[0].style.height=35 + 55*(int(img2.style.top)/300);
	
	img3.getElementsByTagName('IMG')[0].style.width=50 + 80*(int(img3.style.top)/300);
	img3.getElementsByTagName('IMG')[0].style.height=35 + 55*(int(img3.style.top)/300);
	
	img4.getElementsByTagName('IMG')[0].style.width=50 + 80*(int(img4.style.top)/300);
	img4.getElementsByTagName('IMG')[0].style.height=35 + 55*(int(img4.style.top)/300);
	
	
	
setTimeout(car,10);
})();
img1.style.display='block';
img2.style.display='block';
img3.style.display='block';
img4.style.display='block';

var div_with_cars=$('div_with_cars');
document.onmousemove=function(e){
	var width=400,
		divx=0,
		e=e||event,
		x=e.clientX;	
	//velocity=0.001*();
	if(x>=0 && x<=400){
		if(x<400/2){
			var k,
				value=(20/(x/10));
				//$('test').innerHTML=value;
			if(value<0.7005){k=0;}
			else{k=70/(x/20);}
			if(k>20){k=20;}
			velocity=0.001*k;			
		}
		if(x>400/2){
			var k,
				value=(20/(x/10));
			if(value>0.7){k=0;}
			else{k=200/int(x/20);}
			if(k>20){k=20;}
			velocity=-0.001*k;			
		}
	}
}
}
</script>
<style>
#div_with_cars img{border: 0px;}
</style>
<div id='div_with_cars' style="position:absolute;top:0;left:0;">
<a href='#' id='img1' style="position:absolute;top:200;left:100;display:none;"><img style='width:130;height:90;' src="images/kamaz-1.jpg"/></a>
<a href='#' id='img2' style="position:absolute;top:200;left:500;display:none;"><img style='width:130;height:90;' src="images/kamaz-2.jpg"/></a>
<a href='#' id='img3' style="position:absolute;top:100;left:300;display:none;"><img style='width:130;height:90;' src="images/kamaz-3.jpg"/></a>
<a href='#' id='img4' style="position:absolute;top:300;left:300;display:none;"><img style='width:130;height:90;' src="images/kamaz-4.jpg"/></a>
</div>

<div id='test'></test>
+1

Автор: Зинченко Евгений Сергеевич (не зарегистрирован), дата: 16 июля, 2010 - 21:48
#permalink

Для работы с графикой в спецификации придумали такую злую штуку, как "холст", после чего абсолютно все рисуется куда легче, к тому же, Ваш пример в разных броузерах работает по разному (ИЕ и сафари). Вывод: не надо напрягать сильно мозг, а надо соскакивать на ВебГЛ или, из-за отсутствия оного, на "холст".
Удачи!


Автор: mycoding, дата: 16 июля, 2010 - 22:05
#permalink

Холст, это в смысле вообще без этого эффекта?
WebGL пока ещё работает не везде.
Дело не только в браузере, но даже в операционной системе.
Сколько не пытался, не получается его запустить на XP, хотя говорят на Windows 7 работает.
Изменил некоторые свойства, теперь рамка в IE 6 не отображается.
Теперь во всех браузерах одинаково работает?
Хотя можно ещё привязку ко времени сделать, чтобы скорость везде была одинаковая.


Автор: Зинченко Евгений Сергеевич (не зарегистрирован), дата: 16 июля, 2010 - 23:55
#permalink

Холст, это всмысле элемент , где предусмотрена работа с графикой и графическими объектами на уровне "расскрашивания" и рисования с помощью базовых математических функций.
P.S. Если разбирался с FileAPI, пожалуйста, помоги: нужно сделать чтение конкретного файла в текстовом режиме + сведения о файле; если быть более конкретным, то как создать экземпляр объекта File (конструктор, аля new File(path, [encoding]) у меня не работает, работает только передача файла из формы)
WebGL у меня на ХР работает... только драйвера ОпенГЛ нужно было обновить...
Заранее благодарен за ответ!


Автор: panyakor, дата: 16 июля, 2010 - 21:52
#permalink

Можно ведь уже во всех браузерах нормальных крутить через CSS3 2D transforms. А в IE есть фильтр Matrix он тоже позволяет крутить. Собвстенно вся задача сводится только к изменению значений этих свойств в обработчиках событий на JS.


Автор: mycoding, дата: 16 июля, 2010 - 21:55
#permalink

Даже не знал, буду пробовать.


Автор: Innuendo108, дата: 17 июля, 2010 - 02:35
#permalink

Скажите, а какое применение у этой штуки? Или может у меня в Chromium она не так работает? 4 изображения - 4 ссылки? Я не мог по изображению нажать, оно от меня убегало. Только если его в нижнюю точку загнать, то тогда нажимается.

П.С. А подскажите, вот зачем инкапсулировать функцию car, что это даёт?


Автор: mycoding, дата: 17 июля, 2010 - 07:50
#permalink

Если честно, то я тоже в этом особого смысла не нашел.
Но на сайте free-lance бывают такие заказы.
Заказчикам, иногда нравится,чтобы было несколько автомобилей в шапке сайта, которые приближались бы и удалялись.
Также, нравятся слайшоу, хотя я в них тоже особого смысла не нашел, но уже два раза делал, а раз платят надо уметь.
Ещё очень много заказов с картами, надо уметь делать анимированую карту Россию с представительствами в разных регионах.

"Инкапсулировать функцию car" - это вы по запись вида

(function car(){alert(1);})();

Ну можно конечно и без неё, просто функция сразу запускается, и не надо её вызывать.


Автор: ixth, дата: 17 июля, 2010 - 15:13
#permalink

Я бы сделал немного универсальнее.

http://ixth.net/examples/kamaz/

<script>

window.onload = function () {

	var $ = function (id) { return document.getElementById(id); },
	int = function (value) { return parseInt(value); },
	sin = function (value) { return Math.sin(value); },
	cos = function (value) { return Math.cos(value); };

	var velocity = 0.001,
		x0 = 200, y0 = 200, // центр эллипса
		angle = 0,
		a = 200, b = 100,
		div_with_cars = $("div_with_cars"),
		images = div_with_cars.getElementsByTagName("img"),
		pix2 = Math.PI * 2;
		
		
	setInterval(
		function () {
			angle += velocity;
			
			for (var i = 0; i < images.length; i++) {
				images[i].style.top = int(x0 + b * cos(angle + (pix2 / images.length) * i));
				images[i].style.left = int(x0 + a * sin(angle + (pix2 / images.length) * i));
			}
		},
		10
	);

	document.onmousemove = function (e) {
		var width = 400,
			divx = 0,
			e = e || event,
			x = e.clientX;	
		if (x >= 0 && x <= width) {
			/*	Тут магия какая-то, прокомментируйте	*/
			var k, value = (20 / (x / 10));
			if (x < width / 2 ) {
				k = (value < 0.7005) ? 0 : 70 / (x / 20);
				if (k > 20) { k = 20; }
			} else {
				k = (value > 0.7) ? 0 : 200 / int(x / 20);
				if (k > 20) { k = 20; }
				k = -k;
			}
			velocity = 0.001 * k;
		}
	}
}
</script>

<style type="text/css">
	#div_with_cars,
	#div_with_cars img {
		position: absolute;
	}
</style>

<div id="div_with_cars">
	<img src="http://vreshenie.ru/for_work/rotation/images/kamaz-1.jpg" alt="" />
	<img src="http://vreshenie.ru/for_work/rotation/images/kamaz-2.jpg" alt="" />
	<img src="http://vreshenie.ru/for_work/rotation/images/kamaz-4.jpg" alt="" />
	<img src="http://vreshenie.ru/for_work/rotation/images/kamaz-3.jpg" alt="" />
	<img src="http://vreshenie.ru/for_work/rotation/images/kamaz-4.jpg" alt="" />
</div>

Автор: mycoding, дата: 19 июля, 2010 - 10:47
#permalink

Огромное Вам спасибо, реально лучше.
А то я сидел формулы выводил и сам не понял, как там и что за формулы нужны, просто подбирал...
Постараюсь переписать с учетом Вашего варианта.


Автор: Артём Шегеда (не зарегистрирован), дата: 25 августа, 2010 - 22:17
#permalink

В оригинальном примере картинки ещё и масштабируются. То есть, существует перспектива


Автор: thekashey, дата: 21 июля, 2010 - 17:15
#permalink

А я бы не интвалил бы значения.
только конечные которые в стиль уходят.
О том что задавать стиль надо не двумя командами а одной - уже говорить и не буду


Автор: goldserg, дата: 2 августа, 2010 - 13:47
#permalink

Забавные штуки которые не несут большого смысла, НО несут большую нагрузку на комп, у меня около 40% проца (2-х ядерного) съедает.

ИМХО использовать холст, CSS3 - если только возможно.
И на крайний случай использовать подобный код.

Потому как нативность будет работать в разы быстрее, хоть и не универсально, но зато более эффективно.


Отправить комментарий

Приветствуются комментарии:
  • Полезные.
  • Дополняющие прочитанное.
  • Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
    Для остальных вопросов и обсуждений есть форум.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.
Содержание этого поля является приватным и не предназначено к показу.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешены HTML-таги: <strike> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <u> <i> <b> <pre> <img> <abbr> <blockquote> <h1> <h2> <h3> <h4> <h5> <p> <div> <span> <sub> <sup>
  • Строки и параграфы переносятся автоматически.
  • Текстовые смайлы будут заменены на графические.

Подробнее о форматировании

CAPTCHA
Антиспам
1 + 15 =
Введите результат. Например, для 1+3, введите 4.
 
Поиск по сайту
Другие записи этого автора
mycoding
Содержание

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное

Дерево всех статей

Популярные таги
Последние комментарии
Последние темы на форуме
Forum