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

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

AutoClicker - Автокликер для популярных тапалок в телеграм, который запускается на вашем ПК в браузере.
CheckTrust - сервис проверки качества сайтов. Экономия до 70% на аренде ссылок.
GoGetLinks - популярная система для получения качественных ссылок в обзорах с размещением навсегда.
Etxt.RU - биржа статей.
FastVPS - качественный VPS/VDS хостинг в германии.
Roistat - система сквозной бизнес-аналитики.

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

Рейтинг:

Дата: 6 августа 2010 Просмотры

26202

Сегодня я покажу вам, как с помощью 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'

   });

  }

  );

});