图像缩放JS（带背景图片，不是img）

Question

我想编写自己的图像缩放JS代码（类似于http://www.elevateweb.co.uk/image-zoom/examples#inner-zoom）但是这个和所有其他插件的问题在于它依赖于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/（从左上角的鼠标开始以获得粗略的想法）

基本上，只需在mouseenter上缩放背景图像，然后在mousemove上使用backgroundPosition属性重新定位它。