Заходи
Гость

Хостинг

Статистика
Яндекс.Метрика Счетчик 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 | Просмотров: 303 | Добавил: Wrecker | Теги: фотографий, Эластичное перелистывание | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Поиск

Статьи
[Менеджмент]
Факторы микросреды организации
[Безопасность систем]
Защита исходных текстов и двоичного кода
[Устронение ошибок систем]
Возможные нежелательные последствия разгона
[Устронение ошибок систем]
Сообщения об ошибках AMI BIOS (часть 2)
[Операционные системы]
MAC OS
[Прогараммирование]
Совместимость типов объектов
[Прогараммирование]
Введение в информатику
[Информатика]
. АНАЛИЗ ТЕОРИИ ЭКСПЕРТНЫХ СИСТЕМ И ВЫВОДЫ
[Прогараммирование]
Разработка ПО с открытыми исходными текстами как особый вид прикладной науки
[Менеджмент]
Факторы микросреды организации

Категории
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 © 2017Конструктор сайтов - uCoz