JQuery. Простой zoom-эффект.

Главная > JQuery. Простой zoom-эффект.

Простой эффект увеличения изображения. При наведении курсора на миниатюру, справа появляется ее увеличенная копия.

Описание работы зуммера.

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

HTML разметка

<div class="zoomer">
  <div class="large"></div>
  <div class="small"></div>
</div>

Стили зуммера

.zoomer{
  width: 300px;
  height: 200px;
  position:relative;
}
.zoomer .small{
  width: 300px;
  height: 200px;
  background: url(../images/img000003.jpg) no-repeat;
  background-size: cover;                /* Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока. */
  position: absolute;
 
}
.zoomer .large {
  background: url(../images/img000003.jpg) no-repeat;
  position: absolute;
  display:none;
  width: 600px;
  height: 400px;
}

Скрипт

$(document).ready(function(){
  var zoomMargin = 15;
 
  function startZoom(e) {
    $('.zoomer .large').css('left', $(this).width() + zoomMargin).show();    // Контейнер у большим изображением становится видимым.
  }
 
  function moveZoom(e) {
  var offset = $(this).offset(),       // В переменной offset хранятся координаты блока с миниатюрой
     x = (e.pageX - offset.left),      // В переменной хранится координата X курсора мыши относительно блока с миниатюрой
    y = (e.pageY - offset.top);        // Координата Y курсора мыши.
    w = $(this).width(),               // Ширина миниатюры
    h = $(this).height(),              // Высота миниатюры
 
    // Позиционирование фона большого изображения относительно того, куда указывает курсор на миниатюре.
    $('.large').css({'background-position': (x / w * 100) + '% ' + (y / h * 100) + '%'});
  }
 
  function endZoom(e) {
    $('.zoomer .large').hide();        // Контейнер с большим изображением скрывается
  }
 
  $('.small').on({
    'mouseenter': startZoom,  // При наведении мыши на миниатюру срабатывает функция startZoom
    'mousemove': moveZoom,    // Когда курсор мыши перемещается внутри миниатюры срабатывает функция moveZoom
    'mouseleave': endZoom     // Когда мышь уходит из области миниатюры срабатывает функция endZoom
  });
})

Получился простой зуммер на JQuery.

Добавить комментарий

JComments