Javascript 如何将放大镜应用于单个页面上的多幅图像？

//放大悬停
功能放大（imgID、缩放）{
var img，玻璃，w，h，bw；
img=document.getElementById（imgID）；
/*创建放大镜：*/
glass=document.createElement（“DIV”）；
设置属性（“类”、“img放大镜”）；
/*插入放大镜：*/
img.parentElement.insertBefore（玻璃，img）；
/*设置放大镜的背景属性：*/
glass.style.backgroundImage=“url（'“+img.src+”）”；
glass.style.backgroundRepeat=“无重复”；
glass.style.backgroundSize=（img.width*zoom）+“px”+（img.height*zoom）+“px”；
体重=3；
w=玻璃偏移网络宽度/2；
h=玻璃。离光/2；
/*当有人将放大镜移到图像上时，执行以下功能：*/
玻璃。添加显示器（“鼠标移动”，移动放大镜）；
img.addEventListener（“mousemove”，移动放大镜）；
/*以及触摸屏：*/
玻璃。添加显示器（“触摸移动”，移动放大镜）；
img.addEventListener（“触摸移动”，移动放大镜）；
功能放大镜（e）{
变量pos，x，y；
/*防止在图像上移动时可能发生的任何其他操作*/
e、 预防默认值（）；
/*获取光标的x和y位置：*/
pos=getCursorPos（e）；
x=位置x；
y=位置y；
/*防止放大镜位于图像外部：*/
如果（x>img.width-（w/zoom））{x=img.width-（w/zoom）；}
如果（ximg.height-（h/zoom））{y=img.height-（h/zoom）；}
如果（y
*{框大小：边框框；}
.img放大镜容器{
位置：相对位置；
}
.img放大镜{
位置：绝对位置；
z指数：3；
边框：1px实心#000；
边界半径：20%；
光标：无；
/*设置放大镜的大小：*/
宽度：120px；
高度：130像素；
不透明度：0；
指针事件：无；
}
悬停。img放大镜{
不透明度：1；
指针事件：初始；
}
进一步阐述我的意见：主要问题是：

页面上的多个元素中存在重复的ID和属性。您应该始终在文档中使用唯一的ID，而不是每个元素都有多个
class
属性，您应该将它们组合成一个属性
您正在初始化单个元素上的放大逻辑。您缺乏迭代逻辑，无法逐步浏览所有要放大的图像

我的建议是：

如上所述修复DOM错误。另外，给你的图像元素，你想放大一个共同的类，所以我们可以选择所有的。示例是
class=“放大图像”
，但您可以使用任意想要的类名
更新
magnize（）
方法以接受图像元素而不是ID：这意味着我们的迭代逻辑可以传入要直接放大的图像元素。将其重写为
函数放大（img，zoom）{…}
，然后删除
var img=…
赋值就足够了

您为每个要放大的图像指定一个类，然后为所有这些图像选择以创建一个HTMLCollection。迭代此集合，并在每次迭代中将image元素作为第一个参数传递

迭代逻辑示例：

// Iterate through all images you want to magnify
const images = document.querySelectorAll('.magnify-image');
Array.from(images).forEach((image) => {
    // We pass the actual image element into the function
    magnify(image, 5);
});

如果您必须支持ES5，那么我们可以这样做：

var images = document.getElementsByClassName('magnify-image');
Array.prototype.forEach.call(images, function(image) {
    // We pass the actual image element into the function
    magnify(image, 5);
});

见概念证明：


//放大悬停
功能放大（img、缩放）{
var玻璃，w，h，bw；
/*创建放大镜：*/
glass=document.createElement（“DIV”）；
设置属性（“类”、“img放大镜”）；
/*插入放大镜：*/
img.parentElement.insertBefore（玻璃，img）；
/*设置放大镜的背景属性：*/
glass.style.backgroundImage=“url（'“+img.src+”）”；
glass.style.backgroundRepeat=“无重复”；
glass.style.backgroundSize=（img.width*zoom）+“px”+（img.height*zoom）+“px”；
体重=3；
w=玻璃偏移网络宽度/2；
h=玻璃。离光/2；
/*当有人将放大镜移到图像上时，执行以下功能：*/
玻璃。添加显示器（“鼠标移动”，移动放大镜）；
img.addEventListener（“mousemove”，移动放大镜）；
/*以及触摸屏：*/
玻璃。添加显示器（“触摸移动”，移动放大镜）；
img.addEventListener（“触摸移动”，移动放大镜）；
功能放大镜（e）{
变量pos，x，y；
/*防止在图像上移动时可能发生的任何其他操作*/
e、 预防默认值（）；
/*获取光标的x和y位置：*/
pos=getCursorPos（e）；
x=位置x；
y=位置y；
/*防止放大镜位于图像外部：*/
如果（x>图像宽度-（带缩放））{
x=图像宽度-（带缩放）；
}
如果（x图像高度-（h/缩放））{
y=图像高度-（h/缩放）；
}
如果（y