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

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/

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

scaled image is not showing properly at bottom right corner and using larger scale

html

javascript

css

jquery

zooming