/ Скрипты / Смена изображений при наведении курсора

Смена изображений при наведении курсора

Автор: delux · Опубликовано 21.03.2016 · Обновлено 25.02.2019

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>

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

<body>
  ..
  <div class="shuffle-me">
    <img src="images/1.jpg">
    <img src="images/2.jpg">
    <img src="images/3.jpg">
    ..
  </div>
  ..
</body>

<body>

</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;
    }

.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>

$(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"              // Селектор изображения.
 });

$(".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" // Селектор изображения.

});

Смотреть DEMO Скачать исходник