javascript - jquery/js gliding/滑动导航项效果

Question

我正在尝试破译在 http://www.htmldrive.net/items/demo/71/Dynamic-navigation-menu-with-scrolling-color-glide-followed-with-jQuery 上看到的那种效果但我对 jquery/js 不是很熟悉(除非代码都为我拼写出来了)

我没能找到许多其他这种菜单效果的示例(我可能使用了错误的关键字)。

谁能帮我弄清楚这些通常是如何创建的？我想在我的网站上这样做(尽管有粗下划线而不是突出显示)。谢谢!

编辑-我知道我只能使用其中一个插件，但我真的很想了解发生了什么/自己做

Answer 1

如果您查看演示 ( taken out of the iframe )，您会看到演示的 JavaScript here ，伴随着一些CSS here .看起来很简单。

“背景”是菜单 HTML 中的一个单独元素:

<div class="webwidget_menu_glide_sprite"></div>

子画面和菜单的 <ul>两者都是绝对定位的。 <ul>样式设置在 Sprite 上方，并且 Sprite 响应 hover 进行动画处理。 <li> 上的事件在菜单中。

---

更新:

要计算和执行动画，您需要三个基本步骤:

• 收听hover <li> 上的事件;
• 根据触发 hover 的元素找到“滑行”元素的宽度和位置效果；
• 根据所述宽度和位置设置动画。

在最基本的形式中，它看起来有点像这样:

/* 1. Attach the event handler: */
$('#menu li').on('hover', function() {
    /* 2. Find the position and width: */
    var newPosition = $(this).position();
    var newWidth = $(this).outerWidth(true);
    /* 3. Animate: */
    $('#menu .glide').stop().animate({
        'left': newPosition.left,
        'width': newWidth
    });
});

我在这里放了一个更完整的例子:http://jsbin.com/unuyov .