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


Урок по 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 пример

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


Раздел: Программирование

Дата последнего изменения: 2014-05-03 22:15:03

Просмотров: 11335

Можете оставить комментарий, можете не оставлять, в общем развлекайтесь как хотите

* Комментарий: (отменить ответ)

* Ваше имя:

Ваш e-mail:

*