Javascript 如何对图片阵列使用缩放？

我需要一个缩放画廊。 我喜欢这个代码，因为它很短

但它使用id，所以我不能用它来建造画廊

我把id改成了类，但没用

---

如何更改此代码以使用类？

您可以使用动态ID进行更改。我创建了一个片段，其中有4个具有不同ID的不同图像，并且缩放效果有效

我认为这样做比重写

类的缩放功能更容易


//图像列表
//使用随机ID！
常量图像=[{
id:Date.now（）-400，
src:'https://loremflickr.com/1200/960/girl/all?random=1'
},
{
id:Date.now（）-200，
src:'https://loremflickr.com/1200/960/girl/all?random=2'
},
{
id:Date.now（）+200，
src:'https://loremflickr.com/1200/960/girl/all?random=3'
},
{
id:Date.now（）+400，
src:'https://loremflickr.com/1200/960/girl/all?random=4'
},
];
//显示图像
（功能（图像）{
让html=''
images.forEach（image=>{
html+=`
ID:${image.ID}

`
})
const container=document.getElementById（'容器'）
container.innerHTML=html
const imagelist=document.querySelectorAll（'.img zoom container>img'）
//为随机ID添加事件侦听器
imagelist.forEach（图像=>{
image.addEventListener（'mouseenter'，函数（e）{
imageZoom（e.target.id，`${e.target.id}-result`）
})
})
})（图像）；
//来自W3学校的代码
// https://www.w3schools.com/howto/howto_js_image_zoom.asp
函数imageZoom（imgID、resultID）{
var-img，lens，result，cx，cy；
img=document.getElementById（imgID）；
结果=document.getElementById（resultID）；
/*创建镜头：*/
lens=document.createElement（“DIV”）；
镜头属性（“类”、“img变焦镜头”）；
/*插入镜头：*/
img.parentElement.insertBefore（镜头，img）；
/*计算结果DIV和镜头之间的比率：*/
cx=结果.offsetWidth/镜头.offsetWidth；
cy=结果.偏视/镜头.偏视；
/*设置结果DIV的背景属性*/
result.style.backgroundImage=“url（'”+img.src+“）”；
result.style.backgroundSize=（img.width*cx）+“px”+（img.height*cy）+“px”；
/*当有人将光标移动到图像或镜头上时，执行一项功能：*/
lens.addEventListener（“mousemove”，moveLens）；
img.addEventListener（“mousemove”，moveLens）；
/*以及触摸屏：*/
lens.addEventListener（“触摸移动”，moveLens）；
img.addEventListener（“触摸移动”，移动镜头）；
功能镜头（e）{
变量pos，x，y；
/*防止在图像上移动时可能发生的任何其他操作*/
e、 预防默认值（）；
/*获取光标的x和y位置：*/
pos=getCursorPos（e）；
/*计算透镜的位置：*/
x=位置x-（镜头偏移宽度/2）；
y=位置y-（镜头离视/2）；
/*防止镜头位于图像外部：*/
如果（x>图像宽度-镜头偏移宽度）{
x=img.width-lens.offsetWidth；
}
if（x<0）{
x=0；
}
如果（y>图像高度-镜头离视）{
y=图像高度-镜头离视；
}
if（y<0）{
y=0；
}
/*设置镜头的位置：*/
lens.style.left=x+“px”；
lens.style.top=y+“px”；
/*显示镜头“看到”的内容：*/
result.style.backgroundPosition=“-”+（x*cx）+“px-”+（y*cy）+“px”；
}
函数getCursorPos（e）{
变量a，x=0，
y=0；
e=e | | window.event；
/*获取图像的x和y位置：*/
a=img.getBoundingClientRect（）；
/*计算光标相对于图像的x和y坐标：*/
x=e.pageX-a.左；
y=e.pageY-a.top；
*考虑任何页面滚动：*/
x=x-window.pageXOffset；
y=y-window.pageYOffset；
返回{
x:x，
y:y
};
}
}
*{
框大小：边框框；
}
d-flex{
显示器：flex；
}
.img缩放容器{
位置：相对位置；
}
.img变焦镜头{
位置：绝对位置；
边框：1px实心#d4；
/*设置镜头的大小：*/
宽度：40px；
高度：40px；
}
.img缩放结果{
边框：1px实心#d4；
/*设置结果div的大小：*/
宽度：300px；
高度：300px；
}
你可能会更好。只是好奇：你为什么不能使用id？我不能
t使用id
s，因为我有动态图片数组。谢谢。你帮了我。