带有滑动图片的动态jQuery菜单

Dynamic jQuery menu with sliding pictures

本文关键字：动态 jQuery 菜单      更新时间：2024-05-31

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

将有一张主图片，上面有文本和超链接，占据60%的屏幕，在它的右边，我需要三张小图片（一张在另一张上面，水平），屏幕宽度为20%（但所有图片的高度都与主图片相同）。

我需要动画方面的帮助。接下来将播放动画：右边的三张图片向上滑动，最上面的消失了，一张新的图片被添加到底部（同时最上面的也消失了）。现在，消失的那个变成了主要的那个。

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

谢谢。

编辑：

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

现在，通过更多的搜索，我发现jQueryUI隐藏函数扩展可以达到我想要的效果。

以下是一个示例：http://jsfiddle.net/WMPRJ/

我现在的问题是，如果你点击顶部的div，当它向上滑动时，底部的div不会跟随它并占据它的位置。我需要这么做。请给我一个解决方案。

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

以下是一些（抱歉，不是一个自包含的示例）代码，这些代码应该会让您达到目的。如果你真的花时间阅读它，你会发现它和我在前两句中描述的一模一样。

$('.thumb').first().slideUp(function(){
  $('#main').attr('src', $(this).attr('src'));
  $(this).remove();
});

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

我不能为您提供完整的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（这就是切换的作用）时，由于释放了空间，第四个图像将出现，为您提供了一个很好的向上滚动动画。

相关文章：