эффект фото ленты
Однажды передо мной стала задача создать фото ленту на javascript. Этот эффект очень часто применяется в разных сайтах. Но мне захотелось написать собственный вариант. Думая я пришел к следующему решению. К тому моменту я учил в учебнике как работать с таблицей и ее столбцами и строками соответственно. Вариант решения оказался следующим. Ленту я составил из таблицы (дивы применять не пришлось).
Она состоит из 3 рисунков (количество рисунков можно увеличить или уменьшить по вашему желанию) и двух боковых стрелок, при клике на которые будут выполняться функция пролистывания ленты.
А технологию пролистывания я сделал следующим образом. В первую очередь рисунок самой крайней ячейки убирается (display='none'), далее запускается функция setInterval которая в процентном соотношении (для достижения плавного эффекта сужения) начинает сужать эту ячейку. И когда ширина ячейки доходит до 1 пикселя, она удаляется и взамен к ней создается новая ячейка только уже с противоположной стороны ленты. Дальше запускается следующая функция setInterval, которая начинает расширять новую ячейку до ширины как у других ячеек. Когда достигается определенная ширина, создается рисунок и вставляется в эту ячейку. Таким образом достигается эффект пролистывания.
Вот и сам скипт
На этом эффект закончен. Еще... регулируя процентные цифры 60 и 210 вы будете регулировать скорость прокрутки.
Кадыр.
)
)
)
Она состоит из 3 рисунков (количество рисунков можно увеличить или уменьшить по вашему желанию) и двух боковых стрелок, при клике на которые будут выполняться функция пролистывания ленты.
А технологию пролистывания я сделал следующим образом. В первую очередь рисунок самой крайней ячейки убирается (display='none'), далее запускается функция setInterval которая в процентном соотношении (для достижения плавного эффекта сужения) начинает сужать эту ячейку. И когда ширина ячейки доходит до 1 пикселя, она удаляется и взамен к ней создается новая ячейка только уже с противоположной стороны ленты. Дальше запускается следующая функция setInterval, которая начинает расширять новую ячейку до ширины как у других ячеек. Когда достигается определенная ширина, создается рисунок и вставляется в эту ячейку. Таким образом достигается эффект пролистывания.
Вот и сам скипт
На этом эффект закончен. Еще... регулируя процентные цифры 60 и 210 вы будете регулировать скорость прокрутки.
Кадыр.