jquery/js滑动/滑动导航项效果

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。它看起来很简单。

"background“是菜单HTML中的一个单独元素：

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

精灵和菜单的<ul>都是绝对定位的。<ul>的样式设置为在精灵之上，并且精灵根据菜单中<li>上的hover事件设置动画。

更新：

要计算和执行动画，有三个基本步骤：

根据触发<li>s;

• Find effect;

• Animate到“hover”元素的宽度和位置的项，"glide“元素的宽度和位置在<li>s；

• Find上侦听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。

Answer 2

以下是如何创建类似效果的一般概述：

创建一个菜单，每个菜单项都在一个单独的div中。下划线可以是图像，绝对位于第一个菜单项的下方。菜单中的每一项都有一个onmouseover功能。该函数将改变下划线的位置(左或右)，一次一个像素。为了让它有一个很酷的滑动效果，可以随着它的移动而加速或减速，我建议使用一个内置的插件。

因此菜单项如下所示：

<div id="menuitem2" onmouseover="movesliderto('45');">

脚本如下所示：

var currentpos= '0'; //initial position

function movesliderto(newposition){
  if (currentpos<newposition){ //moving the slider to the right
   for (var i=currentpos; i<newposition; i++) {
    document.getElementById('underline').style.left += 1;
 } else { //moving the slider to the left
   for (var i=newposition; i<currentpos; i++) {
    document.getElementById('underline').style.left -= 1;
 }
}

当然，您可能希望foreach的每次迭代花费几毫秒的时间，因此您可能希望将其放在一个计时函数中。