javascript - 缩放后的图像在右下角显示不正确并且使用了更大的比例

Question

我最近在为我的博客相册部分尝试使用图像放大镜代码。
使用 1.5 data-scale，图像 id=album 在左上角悬停时正确显示。
但在右下角，它显示的是背景。此外，当我使用 2.5 data-scale 时，当光标在其上移动时图像会闪烁。
我相信是.on('mousemove', function(e)的问题，里面的算法我很难改。
我希望代码像原始代码一样工作。请帮我修改一下，非常感谢!

My test code
Original code

Answer 1

实际上，当您在 transform-origin 中移动图像时，您会快速移动它(您正在使用大图像的高度和宽度)。

所以一个解决方案是将运动系数除以比例:

$(this).css({'transform-origin': 
       ((e.pageX - $(this).offset().left) / $(this).width()) 
           * 100/$(this).attr('data-scale') + '% '
     + ((e.pageY - $(this).offset().top) / $(this).height()) 
           * 100/$(this).attr('data-scale') +'%'})

你的 jsfiddle 更新了:https://jsfiddle.net/wpnubmah/