Красивый эффект при наведении на картинку

Урок по javascript

В этом небольшом уроке я приведу простой пример того, как можно создать красивый эффект при наведении на картинку!

Как и в других уроках по javascript, в конце описания вы сможете скачать исходники примера и применить этот код на практике, например, на своем сайте.

Сначала немного опишу то, в чем состоит суть эффекта, а потом приведу код.

У нас имеется обычная картинка, когда мы наводим на нее мышью, она увеличивается в размерах, немного приближаясь к нам,  её края закругляются и появляется тень.

Код написан только для одной картинки, если вам потребуется применить такой эффект сразу к нескольким картинкам, то нужно будет немного доработать код, пробежав по всем нужным картинкам с помощью функции – each.

Код jquery

$(document).ready(function(){

	var img = $('#img');
	
	img.mouseover(function(){
		$(this).animate({'-moz-border-radius':'20px','-webkit-border-radius':'20px','border-radius':'20px','width' : '400','height' : '225','opacity' : '1','margin-top' : '10px','margin-left' : '10px'},500);
		$(this).css({'box-shadow' : '0 0 10px rgba(0,0,0,0.5)'});
	});
	
	img.mouseleave(function(){
		$(this).animate({'-moz-border-radius':'0','-webkit-border-radius':'0','border-radius':'0','width' : '310','height' : '174','opacity' : '0.8','margin-top' : '0','margin-left' : '0'},500);
		$(this).css({'box-shadow' : '0'});
	});

});

Как видите, при наведение мы устанавливаем картинке одни стили, а когда мышь покидает область картинки, другие стили.

Также, с помощью метода – animate, мы делаем задержку на 500 миллисекунд(полсекунды).

Вот в принципе и все, чем я хотел сегодня с вами поделиться, в следующем уроке, скорее всего, расскажу о том, как сделать красивую и быструю галерею, но уже не на чистом javascript, а с помощью JQUERY.

Можете посмотреть и скачать демо пример, в котором будут все исходники, на этом все, пока!

Demo пример

Скачать исходники


Хостинг, которым я пользуюсь: Good-Host


Похожие статьи

Оставить комментарий

Ваш email не будет опубликован. Обязательные поля отмечены *

*

code

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>