Zara的产品形象功能
Zara的产品形象功能
提问于 2017-10-09 19:00:17
我试图复制Zara的产品功能：(点击产品图像) https://www.zara.com/es/en/woman/outerwear/view-all/tweed-coat-with-metal-buttons-c733882p5205048.html
我发现它几乎是用小提琴做的：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');
});
});只有一件事我解决不了。
当我点击该图像并展开时，它会跳到与光标相对的相应位置。
有什么办法能解决这个问题吗？就像扎拉一样..。提前感谢！
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-10-09 19:20:07
问题是，当你移动光标时，图像会跳到你的光标上，对吗？这应该能做你想要的！
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);
});Stack Overflow用户
发布于 2017-10-09 19:22:06
在小提琴中，它有一个与鼠标的位置和图像的宽度/高度有关的部分：
$('.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即可。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46653276
复制相关文章
相似问题
腾讯云开发者
