Бегущая строка

[DjTarik]

Была задача - написать скрипт "бегущей строки". Сделал как можно проще.

Ссылка: http://tarik.kasperovich.ru/test_9/index.html

Код:

	// The document is loaded -->
		onload = function()
			{
				runingLine.initial('RunLineLrt', 50, 'ltr');

				//runingLine.initial('RunLineRtl', 50, 'rtl');
			}
		// -->

		var runingLine = {};

		// RuningLine initialization -->
		runingLine.initial = function(id, value, direction)	// direction can be 'ltr' or 'rtl' -->
			{
				obj = document.getElementById(id);
				parent = obj.parentNode;
				speed = Math.round(1000/value);	// quantity of pixels in a second -->
				obj.style.visibility = 'visible';

				if (direction == 'ltr')
					{
						posStart = parent.offsetWidth;	// start coordinate -->
						posFinish = -(obj.offsetWidth);	// finish coordinate -->
						runingLine.traffic.ltr();
					}
				else if (direction == 'rtl')
					{
						posStart = -(obj.offsetWidth);	// start coordinate -->
						posFinish = parent.offsetWidth;	// finish coordinate -->
						runingLine.traffic.rtl();
					}

				obj.onmouseover = function()
					{
						clearTimeout(timer);
					}
				obj.onmouseout = function()
					{
						if (direction == 'ltr')
							{
								runingLine.traffic.ltr();
							}
						else if (direction == 'rtl')
							{
								runingLine.traffic.rtl();
							}
					}
			}
		// -->

		runingLine.traffic = {};

		// RuningLine traffic 'left to right' -->
		runingLine.traffic.ltr = function()
			{
				if (posStart >= posFinish)
					{
						posStart-=1;	// change coordinate -->
						obj.style.left = posStart+'px';
						timer = setTimeout(arguments.callee, speed);
					}
				else
					{
						posStart = parent.offsetWidth;	// start coordinate -->
						posFinish = -(obj.offsetWidth);	// finish coordinate -->
						runingLine.traffic.ltr();
					}
			}
		// -->

		// RuningLine traffic 'right to left' -->
		runingLine.traffic.rtl = function()
			{
				if (posStart <= posFinish)
					{
						posStart+=1;	// change coordinate -->
						obj.style.left = posStart+'px';
						timer = setTimeout(arguments.callee, speed);
					}
				else
					{
						posStart = -(obj.offsetWidth);	// start coordinate -->
						posFinish = parent.offsetWidth;	// finish coordinate -->
						runingLine.traffic.rtl();
					}
			}
		// -->

Вроде всё просто.

Но есть пару вопросов:

1. У меня есть объект "var runingLine = {};". Я от него создавал функцию "runingLine.initial()", чтобы как-то удобнее скомпоновать свой код. Это вообще верный подход? Где можно почитать об этом? (в смысле, как улучшить код и как грамотнее работать с объектами)

2. У меня есть объект "var runingLine = {};". Я от него создавал "runingLine.traffic = {};" и потом ещё "runingLine.traffic.rtl()" и т.д. Можно ли так делать, или это неграмотно?

Я только учусь, и не знаю, где взять информацию о том, как грамотно работать с объектами и в чём фишка объектно=ориентированного подхода. =(

P.S. Есть ещё вопросы, но о них чуть позже. Пока интересует только это.

Спасибо.

Edited August 26, 2010 by DjTarik

[Veseloff]

Вообще-то есть тег «marquee» на htmlbоok.ru

[DjTarik]

Вообще-то есть тег «marquee» на htmlbоok.ru

Все это знают. Не подходит мне. И задача не в строке, а в том, как грамотно это сделать на JS.

[barsev]

Некоторое время назад ради тренировки тоже решил написать такую вещь. Получилась на одном дыхании. Принцип движения такой же, как у вас, но код немножко покороче. Если есть желание, можете посмотреть здесь.

[DjTarik]

Некоторое время назад ради тренировки тоже решил написать такую вещь. Получилась на одном дыхании. Принцип движения такой же, как у вас, но код немножко покороче. Если есть желание, можете посмотреть здесь.

Ну строка-то у меня работает.

Проблема в другом:

1. У меня есть объект "var runingLine = {};". Я от него создавал функцию "runingLine.initial()", чтобы как-то удобнее скомпоновать свой код. Это вообще верный подход? Где можно почитать об этом? (в смысле, как улучшить код и как грамотнее работать с объектами)

2. У меня есть объект "var runingLine = {};". Я от него создавал "runingLine.traffic = {};" и потом ещё "runingLine.traffic.rtl()" и т.д. Можно ли так делать, или это неграмотно?

Т.е. меня интересует, как правильно и грамотно писать код.

[DjTarik]

Кстати - перестало работать в IE:

Пишет, что не поддерживается вот это:

parent = obj.parentNode;

Не могу понять, что ж ему не нравится? O_o

[s0rr0w]

Не могу понять, что ж ему не нравится? O_o

Не нравится то, что ты пытаешься переопределить глобальную переменную window.parent.

[DjTarik]

Не нравится то, что ты пытаешься переопределить глобальную переменную window.parent.

Спасибо, Помогло. Я и забыл о существовании window.parent.

А как на счёт этого:

1. У меня есть объект "var runingLine = {};". Я от него создавал функцию "runingLine.initial()", чтобы как-то удобнее скомпоновать свой код. Это вообще верный подход? Где можно почитать об этом? (в смысле, как улучшить код и как грамотнее работать с объектами)

2. У меня есть объект "var runingLine = {};". Я от него создавал "runingLine.traffic = {};" и потом ещё "runingLine.traffic.rtl()" и т.д. Можно ли так делать, или это неграмотно?

Т.е. меня интересует, как правильно и грамотно писать код.

[s0rr0w]

Спасибо, Помогло. Я и забыл о существовании window.parent.

А как на счёт этого:

1. У меня есть объект "var runingLine = {};". Я от него создавал функцию "runingLine.initial()", чтобы как-то удобнее скомпоновать свой код. Это вообще верный подход? Где можно почитать об этом? (в смысле, как улучшить код и как грамотнее работать с объектами)

2. У меня есть объект "var runingLine = {};". Я от него создавал "runingLine.traffic = {};" и потом ещё "runingLine.traffic.rtl()" и т.д. Можно ли так делать, или это неграмотно?

Т.е. меня интересует, как правильно и грамотно писать код.

Такие вещи лучше выносить в конструктор или в синглтоны.

Например

function traffic () {

this.rtl = function(){}

}

runingLine.traffic = new traffic();

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

[DjTarik]

Такие вещи лучше выносить в конструктор или в синглтоны.

Например

function traffic () {

this.rtl = function(){}

}

runingLine.traffic = new traffic();

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

Спасибо, понял.

И самый главный вопрос:

Нужно запустить одновременно 2 или 3 бегущих строки.

В моём случае хотел сделать так:

		onload = function()
			{
				runingLine.initial('RunLineLrt', 50, 'ltr');
				runingLine.initial('RunLineRtl', 50, 'rtl');
			}
		// -->

Но так не пашет. И по идее, это логично. Так как у меня там таймауты.

Как (можно только в теории) такое делается? Каков принцип?

[s0rr0w]

Как (можно только в теории) такое делается? Каков принцип?

Принцип стека нужно использовать.

Обычно делается массив, в который добавляются объекты с данными бегущих строк.

И отдельный итератор занимается анимированием всех этих объектов.

[DjTarik]

Принцип стека нужно использовать.

Обычно делается массив, в который добавляются объекты с данными бегущих строк.

И отдельный итератор занимается анимированием всех этих объектов.

Не совсем понял про "итератор". Хотел сделать так:

	// <![CDATA[

		// The document is loaded -->
		onload = function()
			{
				runingLine.iterator();
			}
		// -->

		var runingLine = {};

		runingLine.info = [
			['RunLineLrt', 50, 'ltr'],
			//['RunLineRtl', 50, 'rtl']
		];

		runingLine.iterator = function() {
			for (var i=0; i<runingLine.info.length; i++){
				var val_1 = runingLine.info[i][0];
				var val_2= runingLine.info[i][1];
				var val_3 = runingLine.info[i][2];
				runingLine.initial(val_1, val_2, val_3);
			}
		}

		// RuningLine initialization -->
		runingLine.initial = function (id, value, direction) {	// direction can be 'ltr' or 'rtl' -->
			obj = document.getElementById(id);
			wrapper = obj.parentNode;

			speed = Math.round(1000/value);	// quantity of pixels in a second -->
			obj.style.visibility = 'visible';

			if (direction == 'ltr') {
				posStart = wrapper.offsetWidth;	// start coordinate -->
				posFinish = -(obj.offsetWidth);	// finish coordinate -->
				runingLine.traffic.ltr();
			}
			else if (direction == 'rtl') {
				posStart = -(obj.offsetWidth);	// start coordinate -->
				posFinish = wrapper.offsetWidth;	// finish coordinate -->
				runingLine.traffic.rtl();
			}

			obj.onmouseover = function() {
				clearTimeout(timer);
			}
			obj.onmouseout = function() {
				if (direction == 'ltr') {
					runingLine.traffic.ltr();
				}
				else if (direction == 'rtl') {
					runingLine.traffic.rtl();
				}
			}
		}

		runingLine.traffic = new Traffic();

		function Traffic() {

			// RuningLine traffic 'left to right' -->
			this.ltr = function() {
				if (posStart >= posFinish) {
					posStart-=1;	// change coordinate -->
					obj.style.left = posStart+'px';
					timer = setTimeout(arguments.callee, speed);
				}
				else {
					posStart = wrapper.offsetWidth;	// start coordinate -->
					posFinish = -(obj.offsetWidth);	// finish coordinate -->
					runingLine.traffic.ltr();
				}
			}
			// -->

			// RuningLine traffic 'right to left' -->
			this.rtl = function() {
				if (posStart <= posFinish) {
					posStart+=1;	// change coordinate -->
					obj.style.left = posStart+'px';
					timer = setTimeout(arguments.callee, speed);
				}
				else {
					posStart = -(obj.offsetWidth);	// start coordinate -->
					posFinish = wrapper.offsetWidth;	// finish coordinate -->
					runingLine.traffic.rtl();
				}
			}
			// -->

		}

	// ]]>

Но не получилось. Получилось, что переписал код, а ошибка та же =)

вот тут:

	  runingLine.info = [
			['RunLineLrt', 50, 'ltr'],
			//['RunLineRtl', 50, 'rtl']
		];

мой массив с данными.

Вот так:

	  runingLine.iterator = function() {
			for (var i=0; i<runingLine.info.length; i++){
				var val_1 = runingLine.info[i][0];
				var val_2= runingLine.info[i][1];
				var val_3 = runingLine.info[i][2];
				runingLine.initial(val_1, val_2, val_3);
			}
		}

хотел пробегать по массиву.

Чего я не понимаю? O_o

вот сылка для наглядности:

http://tarik.kasperovich.ru/test_10/index.html

Как верно построить цикл, что бы одна и та же функция двигала сразу несколько строк?

Edited September 13, 2010 by DjTarik

[DjTarik]

Ребята, кто подскажет?