Смена изображений при наведении курсора
Shuffle Images — простой плагин для смены изображений при наведении курсора мыши.
Несколько разных эффектов.
Как использовать:
1. Подключим jQuery и сам плагин (в шапку сайта)
|
1 2 |
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript" src="jquery.shuffle-images.js"></script> |
2. Добавляем разметку html
|
1 2 3 4 5 6 7 8 9 10 |
<body> .. <div class="shuffle-me"> <img src="images/1.jpg"> <img src="images/2.jpg"> <img src="images/3.jpg"> .. </div> .. </body> |
3. Добавим стили CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
.shuffle-me { width: 25%; height: 150px; margin: 2%; display: block; position: relative; float: left; width: 26%; height: 209px; } .info { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.35); padding: 20px; text-align: center; display: block; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .info h1 { font-weight: bold; color: white; font-size: 20px; margin: 55px 0 0; text-transform: uppercase; letter-spacing: 1px; padding: 0; } .info h1 a { color: #fff; } .info h2 { margin-top: 0; color: white; font-size: 14px; font-family: georgia; font-style: italic; } .shuffle-group { position: relative; width: 100%; margin-bottom: 10px; } .shuffle-group .shuffle-me { width: 31.9%; float: left; margin: 5px; } .shuffle-group .shuffle-me:first-child { width: 66%; float: left; height: 431px; } .shuffle-group .shuffle-me:first-child h1 { margin-top: 190px; font-size: 30px; } |
4. Все готово, осталось только включить плагин (Добавляем в шапку)
|
1 2 3 4 5 6 7 8 |
<script> $(document).ready(function(){ $(".shuffle-me").shuffleImages({ target: ".images > img" }); }); </script> |
5. Список настроек
|
1 2 3 4 5 6 7 8 |
$(".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" // Селектор изображения. }); |
