イメージズームJS（背景画像あり、imgでない）

Question

私は自分自身の画像をズームしたいと思っています（http://www.elevateweb.co.uk/image-zoom/examples#inner-zoomに似ています）がJSコードを似ていますが、これと他のすべてのプラグインの問題はimgタグに依存している背景画像を使用して同じ効果を得たい場合

私はjsFiddleを作成しましたが、マウスの動きを再作成しようとすると問題が発生しています。私は、あなたがマウスを動かすと、背景画像を拡大/縮小することができます（JSを使ってURL srcをより大きな画像に置き換えることができます）。しかし、画像の代わりに画像/ 。

https://jsfiddle.net/x69tk48s/

$('.inner').mousemove(function(e) { 
    $('.each-image .bg').offset({ 
     left: e.pageX, 
     top: e.pageY 
    }); 
}); 

$('.inner').on('mouseleave', function() { 
    $('.each-image .bg').css({ 
     left: 0, 
     top: 0 
    }); 
}); 

任意の考え？

Answer 1

数学は正しくはありませんが、ここではそれを達成する方法についての大まかなアイデアがあります：https://jsfiddle.net/3cebzudv/2/（大まかなアイデアを得るために左上にマウスを置いて開始してください）。

基本的には、マウスの中心で背景画像を拡大し、mousemoveのbackgroundPositionプロパティで再配置してください。