我正在尝试复制 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一样... 提前致谢!
最佳答案
问题是一旦您移动图像就会跳到您的光标处,对吗?这应该可以满足您的需求!
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);
});
关于javascript - Zara的产品图片功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46653276/