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