[JS, jQuery] бесконечная лента из блоков (зацикленная)

PooH

какой алгоритм лучше использовать?
задача: есть лента из 20-30 изображений по 150px шириной
необходимо крутить эту ленту по горизонтали, при этом лента зациклена (после последнего изображения - первое, перед первым - последнее)
пока в голову приходит только анимирование каждого изображения и перемещение DOM элементов из конца в начало, и из начала в конец.
недостатки: при каждой прокрутке анимация не синхронна (есть небольшая задержка анимации для каждого последующего изображения часто приходится манипулировать DOM деревом (мне не нравится постоянно перемещать объект по DOM дереву, тем более, что каждое изображение по сути DIV с вложенными дивами и навешанными событиями)
думаю, что лучше - исправлять эти недостатки или найти более подходящий алгоритм

PooH

с снихронизацией разобрался
если кому интересно:
любой, кто пробовал одновременнно анимировать большое кол-во объектов, сталкивался со следующей проблемой - анимация каждого следующего элемента имеет небольшую задержку, даже если вызывать animate 1 раз сразу для всех элементов.
Как может показаться на первый взгляд, это обуславливается созданием отдельного таймера для каждого объекта. На самом деле jQuery создает только 1 таймер для всех анимаций на странице, вся загвоздка в том, что начальное время выполнения анимации рассчитывается отдельно для каждого элемента. Отсюда и рассинхронизация.
Это очень легко правится. Странно, что разработчики сами не поправили этот момент (тем более логика одного таймера сама подсказывает такое поведение).
вот статья:
http://www.splashnology.com/blog/jquery/237.html

uncle17

замутненный недосыпом разум выдал мысль о двух одинаковых дивах с лентами и тасовке их друг с другом, чтобы увеличить производительность

PooH

не нравится наличие уже не двух-трех дополнительных изображений, а 20-30

PooH

вообще
http://rsg.su - я сейчас над ним работаю оценить кол-во изображение можно
сегодня разберусь с синхронизацией анимации, но все равно не нравится мне постоянно дергать DOM дерево

uncle17

постоянно дергать не обязательно.
Сделай один раз объектами и дергай их (прелоадер, например, использовать).

PooH

Сделай один раз объектами и дергай их (прелоадер, например, использовать).

пожалуйста, поподробнее

YUAL

а чё это за скрипты лежат на сайте майкрософта? в первый раз вижу.

0000

У тебя лента на 8 видимых элементов, покажу для 3-х.
Пусть лента = abcdefgh (8 картинок, 3 из которых в каждый момент видны). Заменяем ленту на ghabcdefghab.
Когда пользователь доберется до h, справа которая, т.е. вот так ghabcdefg[hab], то выполняй подмену сдвига на меньший.
Чтобы двигать можно поместить все в div и выполнять его сдвиг в абсолютных координатах.
P.S. Возможно все написанное бред

PooH

Чтобы двигать можно поместить все в div и выполнять его сдвиг в абсолютных координатах.

я правильно понимаю, что при достижении крайнего элемента мы просто перескакиваем на начальную позицию?
если так - то это то, что нужно!
отличное решение!

0000

Да, все верно понял.

PooH

вот еще один вопрос знатокам js и jQuery:
я сейчас пишу плагин к jQuery и мне понадобилось создать несколько своих методов
как это лучше организовать?
т.е. мне хочется что-то похожее на это:

 

$.fn.myPlugin = function {



var that = this;



var myMethod = function( text ) {

   that.html( text );

   //code here

}



//code here



return this;

}



$('div#1').myPlugin;

$('div#1').myPlugin.myMethod(hello);



$('div#2').myPlugin;

$('div#2').myPlugin.myMethod(world);

при этом совсем не хочется гадить методами напрямую в $.fn, а гадить в namespace
пробовал через $.fn.myPlugin.myMethod = function{}, но в этом случае метод не привязан к внутренним переменным myPlugin, точнее метод переопределяется каждый раз при вызове $.fn.myPlugin.myMethod = function{}
думаю попробовать через $.extend({ myMethod: function {} }, this); return this, но сейчас не особо много времени экспериментировать

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