Генератор форм

Для веб-мастера

Реклама


Эффект плавного уменьшения изображения на JQuery

Рейтинг:
Дата: 6 августа 2010 Просмотры 19026 Комментарии 1

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

Эффект плавного уменьшения изображения на JQuery

Этот эффект может быть использован при создании фотогалереи изображений.

Наш пример использует несколько черно-белых изображений, чтобы сосредоточить внимание на эффекте.

Выглядеть это будет так!

Итак, давайте начнем.

1.Разметка

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

<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>

Все изображения имеют одинаковый размер (500х333 рх), так как мы хотим, чтобы эффект был тот же самый на каждом изображении. Вы можете использовать изображения различных размеров, но имейте в виду, что вам нужно адаптировать функции JavaScript в целях обеспечения плавного эффекта.

2. 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,  мы будем делать эффект плавного уменьшения.

3. JavaScript

При наведении указателя мыши на картинку срабатывает обработчик .hover() и запускается функция, с помощью которой, мы делаем изображение непрозрачным, изменяем высоту на 200px и установим позицию top и left  - 0.

Когда указатель мыши выходит за пределы изображения мы возвращаем исходный стиль:

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

Скачать исходники можно здесь!

И это все! Наслаждайтесь!

Источник статьи: http://tympanus.net/

Оцените эту статью:
Похожие статьи
Интересно почитать

    Получать новые материалы этого сайта на свой email адрес?

    Отправлять мне комментарии по эл. почте?

Реклама

Топ комментаторы

  • Иван (1)

Нашли ошибку в тексте

Система Orphus
https://biznesguide.ru/coding/110.html
5 из 5 на основе 0 оценок.
Твиттер Facebook Google plus RSS