Фокусируем внимание на активном изображении

На вашем сайте множество изображений, и вы хотели бы выделить изображения при наведении курсора мыши на него, тогда этот урок именно для вас. В данном уроке мы рассмотрим как сделать фокусировку внимания на активном изображении с помощью jquery. Эффект состоит в следующем, когда пользователь наводит курсор на изображение, то оно слегка увеличивается, при этом все остальные картинки затемняются. Это решение идеально подойдет для разного рода портфолио. С помощью нескольких строк кода можно сделать так, чтобы посетитель не отвлекался на другие изображения..

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

Для начала мы подключим фреймвор, который будет отвечать за эффекты при фокусировании, данный строчку скрипта размещаем между тегами head:

1	<script type="text/javascript" charset="utf-8" src='js/jquery.js'></script>

Далее мы рассмотрим саму структуру HTML, В данной размете кода все очень просто. У нас есть обертка с классом spotlightWrapper. Внутри находится неупорядоченный список, который содержит элементы списка с анкорами и изображениями.

<ul>

</ul>

</div>

Следующий этап-стили CSS. В стилях также ничего экстраординарного.

Класс active будет принадлежать изображению при наведении на него мышкой. И не забудьте, чтобы Ваши значения left и top имели одинаковые значения с border-width, но со знаком «-«.

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

Завершающим этапом будет 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. Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.