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

Описание работы слайдера.

Для реализации такого zoom-эффекта на JQuery нужна простая html-разметка. Она состоит из общего контейнера .magnify, в котором размещена миниатюра изображения и контейнер для увеличенного изображения .large

HTML разметка

Для начала сделаем простой слайдер с автоматической прокруткой. Для его работы нужно два контейнера. Первый будет задавать размер видимой области слайдера, а второй нужен для размещения в нем слайдеров. Разметка слайдера будет иметь следующий вид:

<div class="magnify">
  <div class="large"></div>
  <img class="small" src="images/img000004.jpg"/>  
</div>

Стили слайдера

.magnify, .small{
  width:150px;
}
.magnify { 
  position: relative;
}
.large {
  display: none;
  width: 150px; 
  height: 150px;
  position: absolute;
  border-radius: 100%;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85), 
  0 0 6px 6px rgba(0, 0, 0, 0.25), 
  inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
 
  background: url(../images/img000004.jpg) no-repeat;
}
.small { 
  display: block;
}

Скрипт

$(document).ready(function(){
 
  var native_width = 0;                                // Переменные для хранения ширины ивысоты 
  var native_height = 0;                               // оригинального изображения
 
  $(".magnify").mousemove(function(e){                 // Когда курсор проходит над областью с изображением  
    if(!native_width && !native_height)              // Если курсор попал на эту область впервые
    {
      var image_object = new Image();              // Создается новый объект типа Image
      image_object.src = $(".small").attr("src");   // В качестве параметра src задается адрес изображения миниатюры
 
      native_width = image_object.width;           // Ширина изображения
      native_height = image_object.height;         // Высота изображения
    }
    else
    {
      var magnify_offset = $(this).offset();       // Координаты миниатюры относительно всего документа
 
      var mx = e.pageX - magnify_offset.left;      // Координаты курсора относительно правого верхнего
      var my = e.pageY - magnify_offset.top;       // края миниатюры
 
      // Если курсор не вышел за пределы миниатюры
      if(mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0)
      {
        $(".large").fadeIn(100);                 // Лупа становится видимой
      }
      else // Если курсор вышел за пределы миниатюры
      {
        $(".large").fadeOut(100);                // Лупа скрывается
      }
      if($(".large").is(":visible"))               // Если лупа видна
      {
        // Расчет координат для фона в лупе
        var rx = Math.round(mx/$(".small").width()*native_width - $(".large").width()/2)*-1;
        var ry = Math.round(my/$(".small").height()*native_height - $(".large").height()/2)*-1;
        var bgp = rx + "px " + ry + "px";
 
          // Расчет координат положения лупы
        var px = mx - $(".large").width()/2;
        var py = my - $(".large").height()/2;
 
        // Изменение координат лупы и позиционирование фона внутри нее
        $(".large").css({left: px, top: py, backgroundPosition: bgp});
      }
    }
  })
})

Ниже показана работа данного зуммера.

Комментарии  

0 #1 profile 01.11.2018 11:31
Need cheap hosting? Try webhosting1st, just $10 for an year.

Цитировать

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


Защитный код
Обновить