0

我目前正在制作一个视频缩略图库,其中包含两行 5 张图片,总共 10 张图片。功能是用户单击视频拇指,然后会发生类似动画的 ios 文件夹,并且在打开的区域内是带有一些信息的视频。我目前有一半在工作,但我很难弄清楚底行的功能。我想当用户点击第二行视频拇指时,该区域会在视频上方打开。这是到目前为止我所拥有的链接 [http://jsfiddle.net/jsavage/Vnya7/14/] 希望它对我正在尝试做的事情更有意义。任何帮助将不胜感激!

4

1 回答 1

0

这是一个粗略的想法,如何实现这样的效果。我在这里更新了你的小提琴:http: //jsfiddle.net/Vnya7/29/

为了理解,我创建了具有多个可见性参数的函数。

function expandToDirection(self, row, content, dir) {..}

基本上,通过正确的班级分配,您将知道哪一行正在调用,如下所示<div class="row bottom">。请注意,底部是方向的另一个参数。

有了这个方向,我可以轻松地在之前/之后注入所需的元素:

if (dir == direction.top) {
    row.before(content);  // will inject content before the said row
    content.find(".folderName").text($(self).text());

} else if (dir == direction.bottom) {
    row.after(content);   // will inject content after the said row
    content.find(".folderName").text($(self).text());

}

注入完成后,您可以简单地添加到.folderContent任何样式类以偏移位置,使其看起来对齐。除此之外,这是一个反复试验的问题。

jQuery 文档

.before( content [, content ] )
描述:在匹配元素集合中的每个元素之前插入由参数指定的内容。
见:http ://api.jquery.com/after/

.after( content [, content ] )
描述:在匹配元素集合中的每个元素之后插入由参数指定的内容。
见:http ://api.jquery.com/before/

于 2013-03-10T02:53:23.230 回答