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

问题是图像移动后会跳转到光标，对吧？这应该做你想要的！

v2

我刚刚将位置更改作为一个函数进行了更新，并在单击缩略图时调用它 - 这样，图像在第一次出现时已经有光标的位置影响它。

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

Answer 2

在小提琴中，它有一个与鼠标位置和图像宽度/高度相关的部分：

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

只需移除此部分即可使用鼠标移动，只需展开onClick。

Zara的产品图像功能

2 个答案: