Вдогонку за предыдущим уроком представляю Вашему вниманию еще один интересный эффект с изображениями.
Это решение идеально подойдет для разного рода портфолио. С помощью нескольких строк кода можно сделать так, чтобы посетитель не отвлекался на другие изображения при просмотре Ваших работ.
Давайте начнем творить!
HTML
<!-- начало spotlightWrapper div -->
<div class='spotlightWrapper'>
<!-- начало неупорядоченного списка -->
<ul>
<li><a href='#'><img src='images/1.jpg' /></a></li>
<li><a href='#'><img src='images/2.jpg' /></a></li>
<li><a href='#'><img src='images/3.png' /></a></li>
<li><a href='#'><img src='images/4.jpg' /></a></li>
<li><a href='#'><img src='images/5.jpg' /></a></li>
<li><a href='#'><img src='images/6.png' /></a></li>
<li><a href='#'><img src='images/7.jpg' /></a></li>
<li><a href='#'><img src='images/8.jpg' /></a></li>
<li><a href='#'><img src='images/9.PNG' /></a></li>
<li><a href='#'><img src='images/10.jpg' /></a></li>
<li><a href='#'><img src='images/11.png' /></a></li>
<li><a href='#'><img src='images/12.png' /></a></li>
<li><a href='#'><img src='images/13.jpg' /></a></li>
<li><a href='#'><img src='images/14.png' /></a></li>
<li><a href='#'><img src='images/15.jpg' /></a></li>
<li><a href='#'><img src='images/16.jpg' /></a></li>
<div class='clear'></div>
</ul>
<!-- конец неупорядоченного списка -->
</div>
<!-- конец spolightWrapper div -->
В HTML коде все очень просто. У нас есть обертка с классом spotlightWrapper. Внутри находится неупорядоченный список, который содержит элементы списка с анкорами и изображениями.
CSS
.spotlightWrapper ul {
list-style-type: none;
margin:0px;
padding:0px;
}
.spotlightWrapper ul li {
float:left; /* важно: left float */
}
.spotlightWrapper ul li a img {
width:200px;
position:relative;
border:none;
}
.spotlightWrapper ul li a img.active {
border:4px solid white; /* тут можно задать стиль границы при выделении */
z-index:1; /* показ над остальными изображениями (у них z-index 0) */
left: -4px;
top: -4px;
}
.clear { clear:both; }
В CSS также ничего экстраординарного. Класс active будет принадлежать изображению при наведении на него мышкой. И не забудьте, чтобы Ваши значения left и top имели одинаковые значения с border-width, но со знаком "-".
jQuery
$(window).load(function(){
var spotlight = {
// прозрачность изображений - можно менять
opacity : 0.2,
/*переменные ниже для ширины и высоты изображений, чтобы
наши <li> были одного размера */
imgWidth : $('.spotlightWrapper ul li').find('img').width(),
imgHeight : $('.spotlightWrapper ul li').find('img').height()
};
//укажите ширину и высоту элементов списка такую же, как у изображений
$('.spotlightWrapper ul li').css({ 'width' : spotlight.imgWidth, 'height' : spotlight.imgHeight });
//при наведении мышки...
$('.spotlightWrapper ul li').hover(function(){
//...найти изображение и добавить активный класс к нему и поменять прозрачнось на 1
$(this).find('img').addClass('active').css({ 'opacity' : 1});
//взять другие элементы списка и поменять их прозрачность
$(this).siblings('li').find('img').css({'opacity' : spotlight.opacity}) ;
//при отводе мышки...
}, function(){
//... найти изображение и убрать класс active
$(this).find('img').removeClass('active');
});
//когда мышка покидает весь список...
$('.spotlightWrapper ul').bind('mouseleave',function(){
//сделать все изображения полностью видимыми
$(this).find('img').css('opacity', 1);
});
});
Этот код может показаться Вам сложным, но на самом деле это не так.
Вместо $(document).ready мы используем $(window).load для того, чтобы все изображения успели загрузки перед запуском jQuery.
Вот и все готово! Еще один интересный эффект можно добавить в нашу копилку jQuery решений для сайтов.