javascript - Zara的产品图片功能

Question

我正在尝试复制 Zara 的产品功能:(点击产品图片) https://www.zara.com/es/en/woman/outerwear/view-all/tweed-coat-with-metal-buttons-c733882p5205048.html

我几乎可以从我发现的 jsfiddle 开始工作: https://jsfiddle.net/y6p9pLpb/1/

$(function() {
  $('.product-wrapper a').click(function() {
    $('.image-zoom img').attr('src', $(this).find('img').attr('src'));
    $('.image-zoom').show();
    $('.product-wrapper').css('display', 'none');
    return false;
  });

  $('.image-zoom').mousemove(function(e) {
    var h = $(this).find('img').height();
    var vptHeight = $(document).height();
    var y = -((h - vptHeight) / vptHeight) * e.pageY;

    $('div img').css('top', y + "px");
  });

  $('.image-zoom').click(function() {
    $('.image-zoom').hide();
    $('.product-wrapper').css('display', 'block');
  });
});

只有一件事我无法解决。

当我点击图片并展开时，这张图片会跳转以匹配其相对于光标的相应位置。

有什么办法可以解决吗？就像Zara一样...提前致谢!

Answer 1

问题是一旦您移动图像就会跳到您的光标处，对吗？这应该可以满足您的需求!

https://jsfiddle.net/8z67g96b/

我只是将位置更改分解为一个函数，并在您单击缩略图时调用它 - 这样，图像在第一次出现时就已经受到光标位置的影响。

function zoomTracking(event){
  var h = $('.image-zoom img').height();
  var vptHeight = $(document).height();
  var y = -((h - vptHeight) / vptHeight) * event.pageY;
  $('.image-zoom img').css('top', y + "px");
}

$('.product-wrapper a').click(function(e) {
 $('.image-zoom img').attr('src', $(this).find('img').attr('src'));
 $('.image-zoom').show()
 zoomTracking(e);
 $('.product-wrapper').css('display', 'none');
 return false;
});

$('.image-zoom').mousemove(function(e) {
 zoomTracking(e);
});