如何像 Google 一样获得下拉图像视图？ [关闭]答案

【问题标题】：How do I get a drop down image view just like Google? [closed]如何像 Google 一样获得下拉图像视图？ [关闭]
【发布时间】：2013-03-23 06:09:05
【问题描述】：

我正在为我的学校项目（高中）创建一个作品集网页，并且我有一个名为“工作”的部分。在那里，我想让图像彼此并排显示（只是一些填充），然后如果您单击它们，将会有一种下拉菜单，其中图像将出现在左侧站点上，而文本则出现在右侧。这也会将网页上的其余内容下推。

一个例子？谷歌图片。如果你在某个地方搜索，比如说“google”，然后你去图片，如果你现在点击一个随机图片，就会有一个带有图片和一些文字的平滑下拉列表，网站上的其余内容是推下去。这就是我要的。只是我不知道如何获得该下拉菜单并将页面的其余部分向下推。

让图片像谷歌一样浮动没什么大不了的，这里的问题是当您点击图片时会出现下拉内容，并将内容下推。

我使用 PHP 可以在我想要的任何时候放入东西，但现在获取该 imagedropdown 不在我的能力范围内。

这不一定适用于所有浏览器，只要它适用于 webkit 和 mozilla 就可以了。

有什么帮助吗？ :)

【问题讨论】：

检查他们的HTML源代码，它可以给你一些想法
另外，使用一些已经这样做的框架或插件。如果你不知道从哪里开始，我相信你很难靠自己快速/实用地完成它。
是的，我正在调查。但它有点乱，很难找到相关信息。
人们可能会讨厌我在一个普通的 JS 问题上鼓励它。但是，有 jQuery 插件可以做到这一点。如果你不想使用它（我完全理解，我自己很少使用它）你可能想看看他们的源代码，看看它是如何完成的。
我最近回答了类似的问题：stackoverflow.com/questions/15465197/…。检查 cmets 以获取完整的实现示例。

【解决方案1】：

你可以用 JQuery 做到这一点..

只需创建一个您想要动画的 div，不显示任何内容。

使用Jquery的向下滑动功能

$(selector).slideDown();

和 Jquery 文档

（如果您还没有包含 JQuery，请不要忘记先包含）

编辑 - （我真的很讨厌无法对问题发表评论）

无论如何，在需要时将内容向下推送只需将您想要的内容包装在一个最小高度为 100px 的容器 div 中，然后如果该容器内的任何内容大于 100px，该 div 将增长以使其适合并将所有内容推到下面它下来。

这是一个更新的小提琴 http://jsfiddle.net/hvf7Q/1/

希望我能帮上忙

【讨论】：

meta.stackexchange.com/questions/45176/…
我明白你在说什么......但他没有说不使用插件，仅仅因为这已发布在 JavaScript 下并不意味着我们不能使用人们可能使用的工具提交替代答案以前不知道。（这是一个公平的假设吗）？

【解决方案2】：

让每行图像都使用div 之类的名称。然后，下拉列表应该可能已经存在于您的 HTML 中的某个地方，并使用 jQuery（函数删除、附加、之后等）“传输”它。

小三角形可以使用其行中图像的索引来定位。如果它们是正方形则更容易，否则使用 jquery 宽度作为矩形。

【讨论】：