Заходи
Гость

Хостинг

Статистика
Яндекс.Метрика Счетчик PR-CY.Rank
Онлайн всего: 1
Гостей: 1
Пользователей: 0

Ccылки

Свежак

Главная » 2013 » Декабрь » 24 » Эластичное перелистывание фотографий
11:22
Эластичное перелистывание фотографий

Эластичное перелистывание фотографий

 


Сегодня мы хотим поделиться скриптом благодаря которому можно реализовать перелистывание набора изображений, с помощью специального жеста.

Три изображения видны по умолчанию: одно сверху, два остальных под ним. Их мы расположили в оси Z. Если же, перетащить верхнее изображение, то оно пропадёт, верхним станет предыдущее и так далее...

 СМОТРЕТЬ  DEMO              СКАЧАТЬ ИСХОДНИК

HTML самой галерейки будет следующая:

<ul id="elasticstack" class="elasticstack">

    <li><img src="img/1.jpg" alt="01"/><h5>Saudade</h5></li>

    <li><img src="img/2.jpg" alt="02"/><h5>Tuqburni</h5></li>

    <li><img src="img/3.jpg" alt="03"/><h5>Retrouvailles</h5></li>

    <li><img src="img/4.jpg" alt="04"/><h5>Onsra</h5></li>

    <li><img src="img/5.jpg" alt="05"/><h5>Mamihlapinatapai</h5></li>

    <li><img src="img/6.jpg" alt="06"/><h5>Koi No Yokan</h5></li>

</ul>

 

 

При перетаскивании изображений, мы применяем эффект "отскакивания”. Дистанция может быть выставлена в параметре distDragBack. Область, выйдя за которую, изображение пропадёт, выставляется в параметре distDragMax. На следующем графике отображены дистанции:


 

А вот собственно и наш сценарий все очень просто:

 

new ElastiStack( element, {

    // distDragBack: если пользователь не зашёл за пределы, возвращаем изображение на место

    distDragBack : 200,

    // distDragMax: если выходит за эти пределы, убираем изображение

    distDragMax : 450,

    // колбэк

    onUpdateStack : function( current ) { return false; }

} );

 

СМОТРЕТЬ  DEMO              СКАЧАТЬ ИСХОДНИК

 

Источник

Категория: jQuery/JS | Просмотров: 669 | Добавил: Wrecker | Теги: фотографий, Эластичное перелистывание | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Поиск

Статьи
[Прогараммирование]
Как работает CSS?
[Прогараммирование]
ЛЕКЦИЯ. Язык Pascal
[Прогараммирование]
Введение в информатику
[Безопасность систем]
Резервирование и восстановление
[Прогараммирование]
Разработка ПО с открытыми исходными текстами как особый вид прикладной науки
[Прогараммирование]
Строковый тип данных
[Прогараммирование]
Статический анализ: ошибки в медиаплеере и безглючная аська
[Прогараммирование]
Файлы
[Прогараммирование]
Динамическая память
[Прогараммирование]
ПОДПРОГРАММЫ. ПРОЦЕДУРЫ И ФУНКЦИИ

Категории
HTML/CSS [21]
jQuery/JS [36]
PHP [4]
Для Ucoz [38]

Популярный софт
Iron Kaspersky Internet Security 2015
Kaspersky Internet Security 2015
Iron Virtual DJ
Virtual DJ
Iron SoundForge 11
SoundForge 11
Iron Alcohol 120
Alcohol 120
Iron Norton Internet Security 2014
Norton Internet Security 2014
Iron Loaris Trojan Remover
Loaris Trojan Remover

Жми

Copyright MyCorp © 2024Конструктор сайтов - uCoz