Zara的產品形象功能

我試圖複製Zara的產品功能：（點擊產品圖片） https://www.zara.com/es/en/woman/outerwear/view-all/tweed-coat-with-metal-buttons-c733882p5205048.html Zara的產品形象功能

我幾乎從的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一樣... 在此先感謝！

來源

2017-10-09 Iñaki

所以你想要某種過渡，而不是直接跳到大視野？ –

不完全是，我的問題來了，當圖像已經展開，我第一次移動光標。您會看到圖像重新調整其位置（「跳轉」）以匹配光標的位置。 –

好的，只需要刪除一部分即可使其正常工作。我發佈了要在答案中刪除的內容。 –

問題是，一旦你移動它，圖像就跳轉到你的光標，對吧？這應該做你正在尋找的東西！

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

來源

2017-10-09 19:20:07 will

你是我的英雄！這是完美的作品！感謝Wil！ –

沒問題，樂意幫忙！ – will

最後一個問題會。看起來，當你可以滾動（例如，讓第二個圖像的內容更大）時，跳轉的效果會再次發生。（1.滾動到底部/ 2.點擊圖片/ 3.圖像跳轉）任何想法爲什麼？ jsfiddle.net/8z67g96b/1 –

在撥弄，它具有與鼠標的位置和圖像的寬度/高度的截面：

$('.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即可。

來源

2017-10-09 19:22:06

Zara的產品形象功能

回答

相關問題