2

我需要制作一个动态 jQuery 菜单来显示产品。

将有一张带有文本和超链接的主图片，占屏幕的 60%，在它的右侧我需要三张小图片（一张在另一张上方，水平方向），屏幕宽度为 20%（但全部占用与主要高度相同）。

我需要动画方面的帮助。接下来是动画：右边的三张图片向上滑动，最上面的消失了，在最下面添加了一张新的（同时最上面消失了）。现在，消失的那一个成为了主要的。

我用 .slideUp 函数做了一个简单的解决方案，但这实际上并没有使 div 上升，而是它只是失去了它的高度，直到它变得不可见。这不是我想要的解决方案。

谢谢。

编辑：

我已经设法使用 jQuery.sliedUp 函数获得了一些解决方案，但我仍然没有得到客户要求的效果。

现在再稍微搜索一下，我发现jQuery UI隐藏功能扩展可以做到我想要的效果。

这是一个例子：http: //jsfiddle.net/WMPRJ/

我现在的问题是，如果您单击顶部 div，当它向上滑动时，底部 div 不会跟随它并取而代之。我需要这样做。请给我一个解决方案。

4

2 回答 2

0

将当前的主要内容附加到缩略图的底部，然后向上滑动顶部remove()。获取其src属性并将其设置为主图像。

这里有一些（对不起，不是一个独立的示例）代码，可以让你到达你要去的地方。如果您真的花时间阅读它，您会发现它与我在前两句话中描述的完全一样。

$('.thumb').first().slideUp(function(){
  $('#main').attr('src', $(this).attr('src'));
  $(this).remove();
});
于 2012-07-30T07:59:05.040 回答
0

如果这是作业，请附加作业标签。

我无法为您提供完整的 HTML 和 javascript，但可以提供一个想法。你有两个块。浮动右块；

Left Block - 60%.
Right Block - 20% (float:right)

定义右和左块的高度并给出overflow:hidden右块。现在定义一个像这样的点击函数。

var nextAnimateImageId = 1;
$("#my_button").click(function{

jQuery("#my_image"+animateImageId).animate({height:'toggle'});
nextAnimateImageId  = nextAnimateImageId + 1;

});

我的想法是，如果你有 5 张图片，由于定义的高度和溢出：隐藏属性，只会显示 3 张。当您将第一个图像设置为 height=0 时（这是 toggle 所做的），由于空间被释放，第 4 个图像将出现，为您提供一个很好的向上滚动动画。

于 2012-07-30T08:25:08.613 回答