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

标签 jquery jquery-isotope

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

创建后,它们将通过同位素 ( like this ) 排列起来。

然后,一旦它们排成一行,在悬停时我希望它们将其他图像移开(调整它们的大小以补偿悬停图像的更大尺寸)并显示更多信息。

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

总之,我对调整图像大小感到困惑。

An example of what I am looking for.

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

感谢您的帮助!

最佳答案

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

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

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

resizesContainer : false

希望这有帮助

关于Jquery Collage 在悬停时调整图像大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6687284/

相关文章:

javascript - 在多步骤表单中使用 POST 时出现问题

javascript - JS - 帮助 - 行分组

d3.js - d3.js 的砌体算法

javascript - IE无法管理 "global"变量?

javascript - 使用变量按值选择 jquery 集合中的元素

javascript - 同位素砌体的自动布局会覆盖排序吗?

jquery - 同位素 + 调整大小 + imageLoaded

jquery isotope 具有无限滚动和图像预加载器

jQuery 同位素插件 — ReLayout

javascript - CKEDITOR::获取所选文本的父节点