Javascript 图像热点变焦

我希望在此网站上复制图像缩放： 当您将鼠标移到左侧的鞋上时，它会在右侧显示一个框，该框具有较大的图像，并显示您正在复制的确切位置。 你知道我该怎么做吗？

---

我可以使用一个库来提供这个功能？

我认为这很简单，你可以自己编写一些很酷的代码。我会在这里给出一些建议，如果我不清楚，请随时提问

当鼠标位于鞋的全图上时，获取其相对位置（X，Y），并更改“缩放框”的背景位置。缩放框将以鞋子的全尺寸图像作为背景图像

你需要做一些计算，比如如果鼠标在（10,10），图像是预览的两倍大，你想在（20,20）处显示它，诸如此类。处理特定情况（角、边框等）时，如果希望鼠标指针位于框的中心，也可以使用相同的方法。这里更多的是数学而不是编程^^

希望有帮助

---

编辑：当然，如果你不想手动操作，约翰的答案会更适合你

这可能就是您想要的，请看标准缩放示例：

---

非常感谢。这正是我要找的。谢谢你的信息。你的回答向我解释了细节，但我投票赞成约翰的答案，因为我很懒，我宁愿使用现有的图书馆。另外，我更多的是一个后端开发人员，所以JS，这不是我的强项。