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


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

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

Читайте также:

Игра Угадай число на JavaScript!
Html таблица на JavaScript
Сортировка пузырьком на JavaScript
Движущаяся машина на JavaScript!
Видео галерея на JavaScript!
Падающий мяч на JavaScript!
Генератор случайных картинок на JavaScript!
Как изменить фон страницы на JavaScript

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

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

* Ваше имя:

Ваш e-mail:

*