Слайдер как на амазоне

319
20 января 2017, 08:48

Всем добрый день!

Вообщем хочется сделать слайдер, как на амазоне, даже не сам слайдер, а возможность увеличить фото и когда водишь мышкой по картинке она двигается (чтобы можно было рассмотреть детали)

Моя попытка провалилась, вот код HTML:

<div class="main">
<div id="carousel" class="slider">
  <div data-thumb="https://allstringsnylon.com/media/catalog/product/cache/1/image/17f82f742ffe127f42dca9de82fb58b1/c/o/cordoba-15cm-concert-uke-top_lrg_1.png"><img src="https://allstringsnylon.com/media/catalog/product/cache/1/image/17f82f742ffe127f42dca9de82fb58b1/c/o/cordoba-15cm-concert-uke-top_lrg_1.png" alt=""></div>
  <div data-thumb="http://rolandblog.ca/wp-content/uploads/2013/11/13082_MATON-UKULELE-CEDAR-TOP__98800_zoom.jpg"><img src="http://rolandblog.ca/wp-content/uploads/2013/11/13082_MATON-UKULELE-CEDAR-TOP__98800_zoom.jpg" alt=""></div>
  <div data-thumb="http://www.lunaguitars.com/productimages/uketribal6/uketribal6.jpg"><img src="http://www.lunaguitars.com/productimages/uketribal6/uketribal6.jpg" alt=""></div>
</div>
</div>

JS:

$(function () {
$(".slider").slick({
    autoplay: true,
    dots: true,
    customPaging : function(slider, i) {
        var thumb = $(slider.$slides[i]).data('thumb');
        return '<a><img src="'+thumb+'"></a>';
    },
});
  var trueHeight,
      trueWidth,
      img;
  $('.slick-slider div img').hover(function(e){
    img = $(this);
    trueHeight = $(this).height();
    trueWidth = $(this).width();
    $(this).css('position', 'absolute');
    var imgHeight = $(this).prop('naturalHeight');
    var imgWidth = $(this).prop('naturalWidth');
   $(this).height(imgHeight);
    $(this).width(imgWidth);
    $(this).mousemove(function(e) {
      var relativeX = e.clientX;
      var relativeY = e.clientY;
    console.log(relativeX+ ' ' +relativeY);
      img.css({'left': relativeX / -6 + 'px', 'top': relativeY / -1.0 + 'px'});
      });
  }, function(){
     img.css({'position': 'relative', 'top': 0,'left': 0});
     $(this).height(trueHeight);
     $(this).width(trueWidth);
  });
});

Пример codepen

Получилось не очень, все прыгает, дергается и хотелось бы знать, может есть готовые решения? Или может кто посоветует как улучшить мой "код", может кто уже делал подобное и готов поделиться! Спасибо!

Answer 1

Вот я набросал такой вариант. Я любитель сложных уравнений, так что разбирайтесь и пользуйтесь :)

$(function() { 
  var imagebox = $('.imagebox'); 
  imagebox.mousemove(function(e) { 
    var cursor_position = { 
      x: e.clientX - $(this).offset().left + $(window).scrollLeft(), // Положение курсора слева 
      y: e.clientY - $(this).offset().top + $(window).scrollTop() // Положение курсора сверху 
    }, 
    imagebox__img = $(this).find('.imagebox__img'), 
    image_position = { 
      left: ((cursor_position.x / $(this).innerWidth()) * imagebox__img.width() - cursor_position.x) * -1, // Вычисляем позицию картинки слева 
      top: ((cursor_position.y / $(this).innerHeight()) * imagebox__img.height() - cursor_position.y) * -1 // Вычисляем позицию картинки сверху 
    } 
    imagebox__img.css({ 
      position: 'absolute',  
      top: image_position.top,  
      left: image_position.left 
    }); 
  }); 
});
.imagebox { 
  position: relative; 
  width: 250px; 
  height: 250px; 
  overflow: hidden; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="imagebox"> 
  <img class="imagebox__img" src="https://i.ytimg.com/vi/Jom-LKUuPgI/maxresdefault.jpg"> 
</div>

READ ALSO
Движение по кругу (CSS3)

Движение по кругу (CSS3)

У меня вопрос по поводу того как синхронизировать анимации @keyframesЕсть планета, которая вращается по кругу

470
Реализация верхнего меню

Реализация верхнего меню

На днях набросал код верхнего меню без использования скриптовВсё работает на ура, но правильно ли это? Дело в том, что я использовал для стилизации...

357
content не работает в less

content не работает в less

Есть такой код:

284
Как работает alignas()?

Как работает alignas()?

Никак не могу понять как работает alignas()Почему расстояние равно 2016, а без него 24?

316