Эффект увеличения при наведении курсора мыши при помощи jQuery


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

На самом деле, эффект увеличения изображения при наведении на него курсора мышидостаточно просто реализуется при помощи jQuery. Подобные эффекты активно применялись во Flashприложениях, делая их необычайно живыми. Сегодня подобный функционал очень просто реализуется при помощи JavaScript. Вам нужно только правильно разметить HTMLкод, оформив внешний вид ваших изображений или миниатюр. Далее добавив пару строк кода JavaScriptвы получаете готовый эффект увеличения. Забыл сказать, что лучше данный эффект применять как раз к миниатюрам, где пользователь не будет видеть изменения качества. Для увеличения, например из миниатюры до реального размера фотографий, лучше использовать jQuery Lightbox скрипты.

Как это выглядит

смотреть демо

Как это работает

Для начала как всегда определяем миниатюры и создаем контейнер, который будет содержать наши изображения. Я выбрал такие размеры: миниатюра в нормальном виде имеет размер 150х150 пикселей, а при наведении курсора мыши её размер изменяется до 250х250 пикселей. Я намеренно выбрал такой большой размах, чтобы продемонстрировать вам работу самого эффекта. На самом деле лучше делать разницу не очень большой, чтобы эффект смотрелся более гладко.

Итак, наша структура:

<div id="container">
	<div class="img"><a href="#"><img src="images/pic1.jpg" width="150" height="150"></a></div>
<div class="img"><a href="#"><img src="images/pic2.jpg" width="150" height="150"></a></div>
<div class="img"><a href="#"><img src="images/pic3.jpg" width="150" height="150"></a></div>
<div class="img"><a href="#"><img src="images/pic4.jpg" width="150" height="150"></a></div>
<div class="clear"></div>
</div>

После этого нам нужно назначить CSS правила для каждого из элементов. Наша задача выстроить при помощи CSS миниатюры в одну горизонтальную линию. Без правил CSS миниатюры следуют вертикально идна за другой.
Добавляем следующий код:

<style type="text/css">
#container {
text-align: center;
margin: 0; 
padding: 0;
}
.img {
z-index: 0;
float: left;
margin: 0;
padding: 0;
position: fixed;
}
.img a img {
position: relative;
border: none;
}
.clear {
clear: both;
}
</style>

После этого шага мы получаем нужное нам расположение и внешний вид наших миниатюр. Довершаем дело, добавляя функционал jQuery. Код очень простой и объяснять его работу я думаю не нужно. Мы создаем две функции, которые обрабатывают события наведения и потери фокуса курсора мыши.

Добавляем код на страницу в секцию тега <head>.

<script type="text/javascript">
$(document).ready(function() {
			
			//пременная отступа
			var cont_left = $("#container").position().left;

			// рапределяем миниатюра по длинне, 
			// смещая их по горизонтали
			$(".img").each(function(index) {
	 var left = (index * 160) + cont_left;
	 $(this).css("left", left + "px");
	 });
			
						
			$("a img").hover(function() {
// при наведении курсора мыши
$(this).parent().parent().css("z-index", 1);
$(this).animate({
height	: "250",
width	: "250",
left		: "-=50",
top		: "-=50"
}, "fast");
}, function() {
// hover out
$(this).parent().parent().css("z-index", 0);
$(this).animate({
height	: "150",
width	: "150",
left		: "+=50",
top		: "+=50"
}, "fast");
});

});
</script>

Надеюсь, вы не забыли подключись саму библиотеку jQuery перед этим.

Отрабатывая, функции не только изменяют размеры изображения, но еще и смещают его. Как видно у меня происходит смещение по горизонтали и по вертикали на 50 пикселей. Если вы используете другие размеры, вам нужно пересчитать для своего случая новое значение этих смещений. Например, если ваши миниатюры имею первоначальные размеры 100х100 пикселей, а увеличиваете вы их до 200х200 пикселей, то ваше смещение можно определить как (200-100) / 2 = 50 пикселей. В данном случае совпало с моим смещением, но других значениях, конечно, будет отличаться.

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

Реклама
Поделиться
Качественные премиум темы и шаблоны для Вашего сайта:

Смотреть полный каталог качественных тем и шаблонов

Здесь Вы можете выбрать из более чем 46 000 готовых дизайнов. Шаблоны сайтов + установка + хостинг + персонализация + поисковая оптимизация + копирайтинг — все эти услуги вы всегда можете получить от профессионалов мирового уровня!

4 комментария

  1. Антон16/01/2015
  2. Александр10/12/2011
    • Николай13/12/2011
  3. Voeslav01/09/2011

Добавить коментарий

16 − 15 =