Javascript 我想从这个网站的一个类似的效果。可以用jQuery完成吗？

我需要一个jQuery效果，类似于这个网站的效果：

[网站已删除]

如果您将鼠标悬停在右侧菜单（滑块右侧），顶部是Visit SMWF，您将看到滑块正在更改。我想要类似的东西

任何人都知道JQ插件，或者至少任何人都可以分享如何实现它？ 这可以在jQuery中完成吗

---

非常感谢

我建议查看jCarousel插件：

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

您只需将单击事件替换为鼠标悬停事件。祝你好运

---

滑动面板上的图像可以很好地实现这一点。鼠标悬停事件和图像放置。如果您在jQuery中查找滑动面板，可以在线查看许多示例。整洁的动画工具：）

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

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

您可能需要以下功能：

• -要移动内容
• -要将事件绑定到右菜单
• -获取左侧内容的当前位置（尽管不是必需的）

您还可以利用

data-

HTML属性，例如为链接分配的属性（您可以读取这些属性以确定要显示的左侧内容的幻灯片）

---

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

我希望这只是一个“良好的开端”

我做的这个画廊有点粗鲁。但是一个好的开始
它捕获

li

元素中包含的图像，并将其克隆到滑块区域。
将

li

元素悬停时，它会将

#imgHolder

向左移动：#imgSlider*此li.index（）-->

---

任何只使用简单CMS的人都可以编辑图库，正如您从简单html中看到的那样。

BTW：该网站使用jQuery；）不是那个网站上的jQuery，而是mootools。他们使用的代码比roXon在这里共享的代码复杂100倍。对于一个“有点粗鲁”的“良好开端”，这实际上相当好看。

$('#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});
});