В данном уроке мы разберемся как создать интересный эффект, который будет проявляться при наведении курсора мыши на объект. Будет включаться очень быстрое слайдшоу, которое может привлекать внимание посетителя своей динамикой.
HTML
Ниже представлен код слайдшоу, в котором изображения вытягиваются из неупорядоченного списка и показываются в бесконечном цикле плагином jQuery Cycle.
Элемент .link обеспечивает адрес URL на который производится переход при нажатии кнопки мыши.
<!-- Слайдшоу
=========================-->
<div class="slideshow-block">
<a href="http://website.com" class="link"></a>
<ul class="slides">
<li><img src="image.jpg"/></li>
<!-- Другие слайды -->
</ul>
</div>
CSS
Размер слайдшоу - 200px х 150px. Он зависит от размера логотипа и слайдов. При изменении потребуется настройка координат положения фона.
Логотип переключается между двумя вариациями цвета с использованием техники работы со спрайтами.
Неупорядоченный список получает класс “active” при наведении курсора мыши, что делает его видимым.
*{
margin: 0;
padding: 0;
outline: none;
border: none;
}
.slideshow-block{
position: relative;
width: 200px;
height: 150px;
overflow: hidden;
background: #111 url('img/bg.jpg');
}
a.link{
position:absolute;
height: 150px;
width: 200px;
display: block;
z-index: 10;
background: url('img/logo.png') no-repeat center top;
}
a.link:hover{
background-position: center -150px;
}
.slides{
z-index:0;
visibility:hidden;
}
.slides.active{
visibility:visible;
}
jQuery
На jQuery возлагаются две задачи:
Связать плагин jQuery Cycle с нашим неупорядоченным списком, превращая его в слайдшоу.
Переключать между паузой и проигрыванием при наведении курсора мыши. Слайдшоу будет скрываться и останавливаться, когда курсор мыши покидает элемент.
<script type="text/javascript">
jQuery(function($){
// Плагин Cycle
$('.slides').cycle({
fx: 'none',
speed: 1,
timeout: 70
}).cycle("pause");
// Остановка и запуск при навдении курсора мыши
$('.slideshow-block').hover(function(){
$(this).find('.slides').addClass('active').cycle('resume');
}, function(){
$(this).find('.slides').removeClass('active').cycle('pause');
});
});
</script>