Плагин смены изображений при ведении курсора по картинке

demosourse

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"

^ Наверх ^