javascript - 动态改变对象的大小而不影响其他元素

Question

我知道标题可能有点令人困惑（我不知道该怎么问这个问题）所以这是我正在研究的例子。

所以我的问题是，每当您将鼠标悬停在图像上时，其他图像都会在图像放大时四处移动。一种可能的解决方案是使用绝对定位，但手动将所有图像定位在网格中非常麻烦（我希望将其设为 3 列宽的网格）。

还有什么其他解决方案可以帮助解决这个问题？我对纯 javascript 解决方案以及使用 JS 库都持开放态度。

CSS：

#gallery {
    display:inline;
    margin:50px;
    height:300px;
}

#gallery img {
    position:relative;
    width:200px;
    margin:30px;
}

score 0 · Accepted Answer

简单的。给每张图片一个不同的z-index！这样他们都在不同的平面...

您可以使用 JavaScript/DHTML 方法来做到这一点。如果您在数组中对图像进行编号，则可以很容易地循环遍历图像并为每个图像分配一个递增的 z-index。

score 0 · Accepted Answer

有没有考虑过使用 javascript 框架，比如 jQuery？

滚动到缩放效果，您将看到您要查找的内容。

2 回答 2