вход

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

Эффект увеличения при наведении курсора мыши при помощи 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 комментария

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

  1. Voeslav:

    Как зациклить эффект увеличения фотографий: http://www.screenr.com/7DWs

  2. Александр:

    Спасибо. Очень понравилась статья , а как сделать несколько рядов фото ?

  3. Николай:

    Несколько рядов очень просто реализовать при помощи правил CSS. Если Вам нужен пример, напишите, попробую сделать.

  4. Спасибо, отличное решение

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

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

Правила комментирования

  1. Кoммeнтapий всегда проходит премодерацию.
  2. В поле "URL блога" можно указывать только ссылку на главную страницу вашего блога. Ссылки на прочие веб-ресурсы (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Запрещается использовать в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия имя изменяется по усмотрению владельца блога. Просьба указывать нормальное имя или ник.
  4. Весьма вероятно, что короткий и неинформативный кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.