jquery - Jquery Collage 在悬停时调整图像大小

Question

我正在寻找以拼贴格式（多种图像尺寸）创建一组图像。

一旦创建，它们都将通过同位素排列（像这样）。

然后，一旦他们排好队，在悬停时我希望他们将其他人移开（调整它们的大小以补偿悬停的图像更大的尺寸）并显示更多信息。

现在我非常接近，但同位素脚本允许它调整容器的大小而不是调整图像的大小。

总之，我很难调整图像的大小。

我正在寻找的一个例子。

这是我迄今为止所拥有的 JSFiddle。

感谢您的任何帮助！

Answer 1

至于调整其他图像的大小以适应动画主图像，我认为同位素不支持这一点。您可能必须编写一些自定义 jquery 动画。

有逻辑的东西：垂直动画，找到图像顶部和底部的所有元素，并在增加高度时将它们缩小相同数量的像素然后水平动画，找到图像左侧和右侧的所有元素并缩小它们与您增加宽度的像素数量相同。

您可以做的一件事来限制容器的大小调整是将此行添加到您的同位素选项：

resizesContainer : false

希望这可以帮助

Answer 2

我对同位素脚本一无所知，但是如果您只想拥有在小提琴中显示的图像数量，并且这个数字不会改变，那么以下将是一个相当简单的解决方案：

1) 绝对定位所有图像。2) 将不同的 .hover() 事件绑定到每个图像。3) 在该悬停事件中，对其他图像进行必要的更改。

这显然不是一个非常可扩展的解决方案，但如果您需要更改的图像数量既可管理又固定，它会工作得很好。