Dobrovoi Master
сделано с душой
В состоянии постоянного подключения...

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

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

Ваш email не будет опубликован.

Вы можете использовать следующие HTML тэги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>