Увеличение картинки как на Алиэкспресс

Question

Пытался найти такой эффект в Гугле но все результаты сходятся к тому что нахожу обычное увеличение при наведении с помощью css. Если кто знает как и где найти такой эффект для реакта или урок на эту тему буду очень благодарен!

Answer 1

Ricco381, на сайт АлиЭкспресс заходить не хочу, там в Китае сейчас короновирус, опасно. Поэтому могу предложить такой вариант увеличения картинки:

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

.zoomer {
  width: 300px;
  height: 200px;
  position: relative;
}

.zoomer .small {
  width: 300px;
  height: 200px;
  background: url(https://storage.yandexcloud.net/incrussia-prod/wp-content/uploads/2017/09/Jack-Ma.jpg) no-repeat;
  background-size: cover;
  /* Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока. */
  position: absolute;
}

.zoomer .large {
  background: url(https://storage.yandexcloud.net/incrussia-prod/wp-content/uploads/2017/09/Jack-Ma.jpg) no-repeat;
  position: absolute;
  display: none;
  width: 600px;
  height: 400px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="zoomer">
  <div class="large"></div>
  <div class="small"></div>
</div>

Знаете, кто это?

БЛОГ НА HUSL

Увеличение картинки как на Алиэкспресс

Ответы (1 шт):