В этом уроке мы покажем, как создать простой эффект уменьшения фотографии с помощью jQuery. Основная задача — показать изображения, которые изначально увеличены, а при наведении указателя мыши на изображение уменьшить его до нормального размера. Этот эффект можно использовать на веб-сайтах с фотографиями или галереями изображений. В нашем примере используются черно-белые изображения, чтобы сосредоточиться на эффекте. Давайте начнем.

Разметка 

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

<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 

Блок с ссылкой и изображением будет всплывать влево, и у него будет относительное позиционирование. У изображения будет абсолютное позиционирование, и заданы значения отступов сверху и слева, чтобы фотография располагалась по центру:

.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 и задаем нулевые значения отступов сверху и слева. При отодвигании указателя мыши мы возвращаем эти значения к заданным изначально:

$(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'
				});
		}
	);
});

И это все. Надеемся, Вам понравился этот урок.

Демонстрация работы – Скачать исходный код

Автор урока Mary Lou