Эффект уменьшения фото на jQuery
Сегодня я покажу вам, как создать простой эффект изменения изображения с помощью jQuery. Идея заключается в том что изображения, которые изначально показаны в увеличенном формате при наведении на него курсора принимают реальный размер и форму.
Этот эффект может быть применен к фотографии или любому другому изображению,а также при использовании веб-сайт галерей. В примере авторов выведены черно-белые изображения, чтобы сосредоточить Ваше внимание на сам эффект.
Отлично, давайте начнем. Но для начала, не плохо бы взглянуть на пример работы эффекта:
Кому оно надо, читаем далее:
HTML:
Мы заключим наши изображения в оболочки с помощью div. Делается это для того, чтобы фотография (которая будет гораздо больше), не показывалась полностью. Внутри у нас будет находиться ссылка на элемент, который окружает изображение, тем самым скрывая некоторую его часть:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<div class="wrap"> <a href="http://www.flickr.com/photos/archetypefotografie/3601313864/"> <img src="images/image1.jpg" alt="Picture 1"/> </a> </div> <div class="wrap"> <a href="http://www.flickr.com/photos/vegaseddie/3910559910/"> <img src="images/image2.jpg" alt="Picture 2"/> </a> </div> <div class="wrap"> <a href="http://www.flickr.com/photos/62337512@N00/445175934/"> <img src="images/image3.jpg" alt="Picture 3"/> </a> </div> <div class="wrap"> <a href="http://www.flickr.com/photos/brunociampi/2461177417/"> <img src="images/image4.jpg" alt="Picture 4"/> </a> </div> <div class="wrap"> <a href="http://www.flickr.com/photos/beadmobile/3298460491/"> <img src="images/image5.jpg" alt="Picture 5"/> </a> </div> <div class="wrap"> <a href="http://www.flickr.com/photos/tonythemisfit/3839281139/"> <img src="images/image6.jpg" alt="Picture 6"/> </a> </div> |
Все изображения должны иметь одинаковый размер (500px раза 333px), поскольку мы хотим, чтобы действие было одинаковым на каждом изображении. Вы можете использовать изображения из разных размеров, но имейте в виду, что вам нужно адаптировать функцию JavaScript для того, чтобы добиться плавного эффекта.
CSS:
Оболочка для ссылки изображения будут иметь левое и относительное позиционирование. Изображение будет иметь абсолютное позиционирование, таким образом мы сможем определить верхний и левый центры на картинке. В вашем файле стилей следует прописать следующее:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.wrap{ width:200px; height:200px; margin:0px; overflow:hidden; position:relative; float:left; } .wrap a img{ border:none; position:absolute; top:-66.5px; left:-150px; height:500px; opacity: 0.5; } |
Как уже упоминалось выше, изображение имеет высоту 333px. Нам необходимо чтобы сначала показывалось «в увеличенном» размере.Прописываем больший размер. В данном случае мы решили установить в 500px. При установлении размера только с одной стороны, изображение будет изменять размеры соответственно.
С помощью функции JavaScript создадим переход из увеличенного изображения в нормальный формат.
JavaScript:
При наведении курсора на фото оно станет непрозрачным с высотой в 200px. При перемещении мыши с изображения возвращаемся к исходным параметрам.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
$(function() { $('#container img').hover( function(){ var $this = $(this); $this.stop().animate({ 'opacity':'1.0', 'height':'200px', 'top':'0px', 'left':'0px' }); }, function(){ var $this = $(this); $this.stop().animate({ 'opacity':'0.5', 'height':'500px', 'top':'-66.5px', 'left':'-150px' }); } ); }); |
На этом пожалуй и все! Надеюсь, что кому-нибудь этот способ вывода фотографий пригодится.
Урок подготовлен и переведен:shurawi
Источник: tympanus.net
Всего комментариев: 0