Однажды мне пришлось создавать эффекты для фото ленты на javascript. Такие эффекты часто применяются на различных сайтах, и их существует огромное множество вариантов. Мне захотелось создать свой неповторимый вариант. При изучении скрипта мне пришлось изучать несколько работ с применением таблиц, а именно со столбцами и строками. И тогда мне пришла в голову мысль об использовании таблицы в создании эффекта. При этом мне удалось избежать применения <div>.
Моя лента состояла из рисунков (их количество разнообразно и зависит от желания) и боковых стрелок (таких стрелок должно быть две). Работа ленты заключается в следующем. Как только на боковые стрелки и рисунки будет произведен клик, так сразу же будет совершаться перелистывание ленты. Для больше понятности я весь процесс перелистывания сделал следующим образом:
[sourcecode language=’javascript’] |
») |
») |
») |
 |
Самым первым убирается рисунок крайней ячейки (display=’none’), после чего начинает работать функция setInterval(). Ее работа заключается в сужение этой ячейки в процентном соотношении. Это нужно для того, чтобы эффект сужение происходил плавно. При достижении ширины ячейки 1 пикселя эта ячейка удаляется и на ее место приходит созданная новая ячейка, но уже с противоположной стороны ленты. В этот момент вступает в работу функция setInterval(). Она теперь начинает расширять новую ячейку и доводит размер появившейся ячейки до размера всех остальных. Как только размер ячейки будет достигнут, создастся новый рисунок и он вставляется в эту ячейку. Так и происходит процесс движения фото-ленты, который я описал словами, но для полной ясности привожу в пример и сам скрипт:
[sourcecode language=’javascript’][/sourcecode]