ザラの商品画像の機能私はザラの製品の機能を複製しようとしている

Question

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

があります：私はそれはほとんど私が見つけたjsfiddleから作業してい https://www.zara.com/es/en/woman/outerwear/view-all/tweed-coat-with-metal-buttons-c733882p5205048.html

を（製品画像をクリックしてください）私が解決できない唯一のこと。

イメージをクリックして展開すると、カーソルを基準にしてそれぞれの位置に合わせてジャンプします。

私はそれを解決する方法はありますか？ Zaraのように... あらかじめありがとう！

Answer 1

問題は、イメージを移動するとカーソルにジャンプすることです。これはあなたが探しているものを行うはずです！

https://jsfiddle.net/8z67g96b/

私はちょうどあなたがサムネイルをクリックしたときに呼び出す関数としても位置変更を勃発、そして - そのように、画像はすでにそれが最初に表示されたときに、それに影響を与えるカーソルの位置を有します。バイオリンで

Answer 2

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

、それはマウスの位置と画像の幅/高さに関連するセクションを有する：

$('.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を展開します。