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

Question

我希望以拼贴格式（多种图像尺寸）创建一组图像。

创建后，它们将通过同位素（like this）排列。

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

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

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

An example of what I am looking for.

And here is my JSFiddle of what I have so far.

感谢您的帮助！

Answer 1

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

有逻辑的东西： 对垂直进行动画处理，找到图像顶部和底部的所有元素，并在增加高度时缩小相同数量的像素 然后设置水平动画，找到图像左侧和右侧的所有元素，并在增加宽度时缩小相同数量的像素。

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

resizesContainer : false

希望这有帮助

Answer 2

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

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

这显然不是一个非常可扩展的解决方案，但如果您需要更改的图像数量既可管理又可修复，那么它可以正常工作。