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

【问题标题】：Image zoom JS (with background image, not img)图片缩放JS（带背景图，不是img）
【发布时间】：2023-03-08 13:36:01
【问题描述】：

我想编写自己的图像缩放 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
     });
 });

有什么想法吗？

【问题讨论】：

标签： javascript jquery css

【解决方案1】：

数学还不是很正确，但这里有一个关于如何完成它的粗略想法：https://jsfiddle.net/3cebzudv/2/（首先将鼠标悬停在左上角以了解粗略想法）。

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

【讨论】：

非常感谢您的帮助，布莱恩。我明白了。而且我想我需要弄清楚“边缘”是什么，这样它就不会“关闭”图像。
对，是的，您需要根据鼠标在“容器”中的位置进行一些计算，并将其与您必须处理的图像数量进行比较。如果您事先知道图像尺寸，这会更容易，但如果不知道，有一些方法可以动态读取图像尺寸（一旦加载），然后将所有这些作为计算的基础。