Плагин смены изображений при ведении курсора по картинке
Shuffle Images - это простой плагин для хаотичной смены изображений в то время, как вы двигаете мышью по картинке.
Данный плагин пригодится тем, кто хочет одновременно сэкономить место на странице, и дать возможность пролистать какую-то группу изображений.
Использование
Для использования плагина вам понадобится jQuery (версия 2.0.0 или выше) и jquery.shuffle-images.js
:
<body> .. <div class="shuffle-me"> <img src="images/1.jpg"> <img src="images/2.jpg"> <img src="images/3.jpg"> .. </div> .. </body>
Все изображения должны быть перечислены в одном контейнере.
После этого необходимо запустить плагин:
$(".shuffle-me").shuffleImages({ trigger: "imageMouseMove", // Триггер на который следует реагировать плагину. Возможные варианты: "imageMouseMove", "imageHover", "documentMouseMove", и "documentScroll". По умолчанию "imageMouseMove" triggerTarget: false, // Для "imageMouseMove", и "imageHover", определение элемента на котором следует отслеживать движение мыши. Если вы хотите чтобы изменялось содержание контейнера ".main", а не самого изображения, то выставляем данную опцию $(".main"). По умолчанию false. mouseMoveTrigger: 50, // Для "imageMouseMove", количество пикселей, которое должно быть пройдено для смены изображения. По умолчанию 50. hoverTrigger: 200, // Для "imageHover", количество миллисекунд которое должно пройти для смены изображения. По умолчанию 200. scrollTrigger: 100, // Для "documentScroll", количество пикселей, которое должно сдвинуться при скролле для смены изображения. По умолчанию 100. target: "> img" // Селектор изображения. });
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: https://github.com/peachananr/shuffle-images
Перевел: Станислав Протасевич
Урок создан: 10 Сентября 2015
Просмотров: 11027
Правила перепечатки
5 последних уроков рубрики "jQuery"
-
Анимация набора текста на jQuery
Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.
-
Временная шкала на jQuery
jQuery плагин для создания временной шкалы.
-
Заметка: Перезагрузка и редирект на JavaScript
Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.
-
Рисуем диаграмму Ганта
jQuery плагин для создания диаграммы Ганта.
-
AJAX и PHP: загрузка файла
Пример того как осуществить загрузку файла через PHP и jQuery ajax.