Dobrovoi Master
сделано с душой

В состоянии постоянного подключения...
Главная » jQuery » Эффект уменьшения фото с jQuery

Эффект уменьшения фото с 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

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

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

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »

Рейтинг@Mail.ru