Вторник, 08 Мая 2012 10:43

Динамика при наведении с помощью JavaScript

Written by 
Оцени эту запись
(3 Голоса)

Рассмотри примеры применения события mouseover() с помощью Javascript для создания динамики на сайте.

В обоих примерах есть блоки с картинками, при наведении на которые происходят некоторые события.

 

 

В первом случае, при наведении на картинку, появляется поверх нее полупрозрачный блок с название картинки.

Во втором случае, при наведении на картинку, она меняется. Для наглядности я сделала черно-белую копию для каждой картинки. Изначально на странице отображаются это черно-белые варианта, а при наведении они заменяются на цветной оригинал.

 

Демо здесь

 

 

HTML:

 

 

<div class="mouseover_desc">
<div class="mouseover_desc_item"><img src="/images/img1.jpg" alt="Красивая картинка под первым номером"></div>
    <div class="mouseover_desc_item"><img src="/images/img2.jpg" alt="Красивая картинка под номером 2"></div>
    <div class="mouseover_desc_item"><img src="/images/img3.jpg" alt="Красивая картинка под номером 3"></div>
    <div class="mouseover_desc_item"><img src="/images/img4.jpg" alt="Красивая картинка номер 4"></div>
    <div class="mouseover_desc_item"><img src="/images/img5.jpg" alt="Описание пятой картинки"></div>
    <div class="mouseover_desc_item"><img src="/images/img6.jpg" alt="Длинное описание картинки 6"></div>
    <div style="clear: left"></div>
</div>
 
Стили здесь простые:
 
.mouseover_desc, .mouseover_change {margin: 20px auto; width: 645px;}
.mouseover_desc_item {float:left; margin-right: 10px; margin-bottom: 10px; border: 1px solid #1033e3; padding: 1px; width: 200px; height: 150px; position: relative;}
 
Для первого примера, для красоты, я сделала разные border'ы и разные цвета блоков, которые появляются при наведении. Для этого было использовано css-свойство nth-child:
 
 
.mouseover_desc_item:nth-child(2) {border: 1px solid #590992;}
.mouseover_desc_item:nth-child(3) {border: 1px solid #f16305;}
.mouseover_desc_item:nth-child(4) {border: 1px solid #219a2a;}
.mouseover_desc_item:nth-child(5) {border: 1px solid #ec1451;}
.mouseover_desc_item:nth-child(6) {border: 1px solid #3e9df5;}
 
 
 
 

Подпись картинки при наведении

 
Теперь смотрим скрипт первого примера:
 
 
<script>
$(function(){
$('.mouseover_desc .mouseover_desc_item').append('<div class="mouseover_desc_text"></div>');
$('.mouseover_desc_text').each(function(){
$(this).text($(this).parent().children('img').attr('alt'));
$(this).width($(this).parent().width());
$(this).height($(this).parent().height());
});
$('.mouseover_desc_item').mouseover(function(){
$(this).children('.mouseover_desc_text').fadeIn(1000);
});
$('.mouseover_desc_item').mouseleave(function(){
$(this).children('.mouseover_desc_text').fadeOut(500);
});
});
</script>
 
 
В блок, содержащий картиноку, вставляем блок, в который выведем название картинки:
 
 
$('.mouseover_desc .mouseover_desc_item').append('<div class="mouseover_desc_text"></div>');
 
 
Этот блок скрываем в стилях и задаем ему абсолютное позиционирование. Также я добавила ему прозрачность 90%.
 
.mouseover_desc_text {display: none; position: absolute; background: #1033e3; top: 1px; left: 1px; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90); -moz-opacity: 0.9; -khtml-opacity: 0.9; opacity: 0.9;}
 
Этим блокам задано разное значение background, аналогично бордерам родителей:
 
.mouseover_desc_item:nth-child(2) .mouseover_desc_text {background: #590992;}
.mouseover_desc_item:nth-child(3) .mouseover_desc_text {background: #f16305;}
.mouseover_desc_item:nth-child(4) .mouseover_desc_text {background: #219a2a;}
.mouseover_desc_item:nth-child(5) .mouseover_desc_text {background: #ec1451;}
.mouseover_desc_item:nth-child(6) .mouseover_desc_text {background: #3e9df5;}
 
 
Для каждого из только что вставленный блоков добавим внутрь название картинки из родительского блока. По фоакту, это содержимое атрибута alt картинки. Задаем новому блоку размеры, равные размерам родительского.
 
$('.mouseover_desc_text').each(function(){
$(this).text($(this).parent().children('img').attr('alt'));
$(this).width($(this).parent().width());
$(this).height($(this).parent().height());
});
 
Теперь при наведении на блок с картинкой, отображаем соответствующий блок с текстом:
 
$('.mouseover_desc_item').mouseover(function(){
$(this).children('.mouseover_desc_text').fadeIn(1000);
});
 
А когда мышка уходит с блока, мы этот текст снова скрываем:
 
 
$('.mouseover_desc_item').mouseleave(function(){
$(this).children('.mouseover_desc_text').fadeOut(500);
});
 
 
 

Изменение картинки при наведении

 

Теперь разберем второй пример.

 

Здесь HTML аналогичный. Только выводятся другие картинки - черно-белые копии наших.

Если у наших картинок названия img1.jpg, то у копий - grey_img1.jpg. Этим мы воспользуемся в скрипте:

 

 

<script>
$(function(){
$('.mouseover_change_item').mouseover(function(){
var n = $(this).children('img').attr('src');
for(b=1;b<7;b++){if (n =='images/grey_img'+b+'.jpg'){m ='images/img'+b+'.jpg'}}
$(this).children('img').attr('src',m);
});
$('.mouseover_change_item').mouseleave(function(){
var n = $(this).children('img').attr('src');
for(b=1;b<7;b++){if (m =='images/img'+b+'.jpg'){n ='images/grey_img'+b+'.jpg'}}
$(this).children('img').attr('src',n);
});
});
</script>
 
Вызываем событие mouseover при наведении на блок, содержащий картинку.
 
$('.mouseover_change_item').mouseover(function(){});
 
 
Переменной n задаем значение, равное атрибуту src картинки, на родителя которой навели.
 
var n = $(this).children('img').attr('src'); 
 
 
Делаем цикл, в котором будем соотносить пути к картинкам и их копиям:
 
for(b=1;b<7;b++){if (n =='images/grey_img'+b+'.jpg'){m ='images/img'+b+'.jpg'}}
 
То есть, в этом цикле находим какой именно у картинки путь и меняем его.
А теперь данной картинке задаем измененный путь:
 
$(this).children('img').attr('src',m);
 
 
Когда курсор уходит с блока с картинкой, проделывем все то же самое в обратную сторону:
 
 
$('.mouseover_change_item').mouseleave(function(){
var n = $(this).children('img').attr('src');
for(b=1;b<7;b++){if (m =='images/img'+b+'.jpg'){n ='images/grey_img'+b+'.jpg'}}
$(this).children('img').attr('src',n);
});

 

 

 

Additional Info

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов