Смена изображений при наведении курсора
Shuffle Images — простой плагин для смены изображений при наведении курсора мыши.
Несколько разных эффектов.
Как использовать:
1. Подключим jQuery и сам плагин (в шапку сайта)
<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
<body>
..
<div class="shuffle-me">
<img src="images/1.jpg">
<img src="images/2.jpg">
<img src="images/3.jpg">
..
</div>
..
</body>3. Добавим стили CSS
.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. Все готово, осталось только включить плагин (Добавляем в шапку)
<script>
$(document).ready(function(){
$(".shuffle-me").shuffleImages({
target: ".images > img"
});
});
</script>5. Список настроек
$(".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" // Селектор изображения.
});
