В данном уроке мы создадим эффект с зумом и выезжающими описаниями.
Подобные решения мы уже представляли на нашем сайте. Но это уникально тем, что совмещает в себе 2 эффекта сразу. При наведении мышки на изображение, оно приближается и снизу выезжает его описание.
Давайте посмотрим как это реализовать!
HTML
<!-- начало thumbnailWrapper div -->
<div class='thumbnailWrapper'>
<ul>
<li>
<a href='#'><img src='images/1.jpg' /></a>
<div class='caption'>
<p class='captionInside'>CofeeNerd</p>
</div>
</li>
<li>
<a href='#'><img src='images/2.jpg' /></a>
<div class='caption'>
<p class='captionInside'>musiKings</p>
</div>
</li>
<li>
<a href='#'><img src='images/3.png' /></a>
<div class='caption'>
<p class='captionInside'>The Caribbean Energy</p>
</div>
</li>
<div class='clear'></div>
</ul><!-- конец неупорядоченного списка -->
</div><!-- конец spolightWrapper div -->
В HTML коде ничего особенного. В демо версии у нас будет 9 элементов списка. в то время как здесь представлено 3. Это сделано в целях экономии места. Там все так же по аналогии.
CSS
.thumbnailWrapper ul {
list-style-type: none; /* убрать стиль типа списка по умолчанию
items (the circles) */
margin:0px; /* убрать margin по умолчанию */
padding:0px; /* убрать padding по умолчанию */
}
.thumbnailWrapper ul li {
float:left; /* важно: left float */
position:relative; /* чтобы мы могли использовать top и left позиционирование */
overflow:hidden; /* спрятать контент за границами
(ZOOM) */
}
.thumbnailWrapper ul li a img {
width:200px; /* не важно, картинки, которые мы используем слишком велики
*/
position:relative; /* чтобы мы могли использовать top и left позиционирование */
border:none; /* убрать синюю границу по умолчанию */
}
.caption{
position:absolute; /* необходимо для позиционирования */
bottom:0px;
left:0px;
width:100%;
display:none;
background:#0c4b62;
color:white;
opacity:0.9;
}
.caption .captionInside{
padding:10px;
margin:0px;
}
.clear { clear:both; }
jQuery
$(window).load(function(){
//задаем некоторые переменные
var thumbnail = {
imgIncrease : 100, /* увеличение изображения в пикселях для зума */
effectDuration : 400, /* продолжительность эффекта для зума и надписи */
/*
Взять ширину и высоту изображений. Используется для 2-х вещей
1) сделать все элементы списка одного размера 2) вернуть изображения
к первоначальным размерам после зума
*/
imgWidth : $('.thumbnailWrapper ul li').find('img').width(),
imgHeight : $('.thumbnailWrapper ul li').find('img').height()
};
//Элементы списка того же размера, что и изображения
$('.thumbnailWrapper ul li').css({
'width' : thumbnail.imgWidth,
'height' : thumbnail.imgHeight
});
//при наведении мышки на элемент...
$('.thumbnailWrapper ul li').hover(function(){
$(this).find('img').stop().animate({
/* увеличить ширину изображения для зума*/
width: parseInt(thumbnail.imgWidth) + thumbnail.imgIncrease,
/* нам необходимо изменить левое и верхнее позиционирование
для зума, и поэтому мы придаем им отрицательные значения
*/
left: thumbnail.imgIncrease/2*(-1),
top: thumbnail.imgIncrease/2*(-1)
},{
"duration": thumbnail.effectDuration,
"queue": false
});
//показать надпись с помощью события slideDown
$(this).find('.caption:not(:animated)').slideDown(thumbnail.effectDuration);
//когда мышку уводят...
}, function(){
//найти изображение и анимировать его...
$(this).find('img').animate({
/* вернуть первоначальный размер */
width: thumbnail.imgWidth,
/* get left and top positions back to normal */
left: 0,
top: 0
}, thumbnail.effectDuration);
//спрятать надпись с помощью события slideUp
$(this).find('.caption').slideUp(thumbnail.effectDuration);
});
});
Вот и все готово. В коде находятся комментарии по функциям и событиям.
Надеюсь, Вам этот урок понравился и Вы будет использовать подобные миниатюры на Вашем сайте. очень эффектно такое будет смотреться на страничке с клиентами. Например, "наши клиенты" и снизу их логотипы с зумом и названием в виде выезжающей надписи.