DEMO fiddle

download from jsbin

$('#niceMenu ul li>img').clone().appendTo('#imgHolder');
$('#niceMenu img').addClass('thumb');
$('#niceMenu li:eq(0)').addClass('hovered');

$('#niceMenu li').mouseenter(function(){
    var imgSliderW = $('#imgSlider').width();
    $('#imgHolder').width( imgSliderW * ($('#imgHolder img').length) );
    $(this).addClass('hovered').siblings().removeClass('hovered');
    var liIndex = $(this).index();
    $('#imgHolder').animate({left: '-'+ imgSliderW * liIndex +'px'}, {queue:false, duration: 800});
});

我制作的这个画廊有点粗鲁。但是一个好的开始！
它抓取li元素中包含的图像并将其克隆到滑块区域当您将li元素悬停时，它会移动#imgHolder：＃imgSlider * this li .index（） - ＆gt;在左边
任何使用简单CMS的人都可以编辑图库，正如您从简单的html中看到的那样。

Answer 2

http://plugins.jquery.com/plugin-tags/sliding-panel

滑动面板上的图像效果很好。鼠标悬停事件和图像放置。如果你在jQuery中查找滑动面板，可以在线获得大量示例。整洁的动画工具：）

Answer 3

我建议查看jCarousel插件：

http://sorgalla.com/projects/jcarousel/

这将为您提供您喜欢的滑动图像功能。您可以在此演示页面中看到类似的功能：

http://sorgalla.com/projects/jcarousel/examples/static_simple.html

您只需要用鼠标悬停事件替换click事件。祝你好运！

Answer 4

是的，可以肯定使用jQuery完成，就像使用Mootools一样。

要实现此悬停移动效果，您可以将事件绑定/委托给右侧菜单，此时左侧内容将被移动以显示适当的图像或您需要的任何其他内容。

您可能需要以下功能：

.animate() - 移动内容，
.delegate() - 将事件绑定到右侧菜单
.offset() - 获取左侧内容的当前位置（尽管不是必需的），

您还可以利用分配的data- HTML属性，例如。对于链接（您可以阅读它们以确定要显示的左侧内容的幻灯片）。

您还需要一些CSS基础知识（尤其是溢出和位置属性）。

我希望与本网站的效果类似。可以用jQuery完成吗？

4 个答案:

DEMO fiddle