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>的样式设置在精灵上方，并且精灵会动画以响应菜单中hover的{{1}}个事件。

<强>更新

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

收听<li> s;

hover

根据触发<li>效果的项目，找出“glide”元素的宽度和位置;
为所述宽度和位置设置动画。

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

hover

我在网上提供了一个更完整的示例：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的每次迭代花费几毫秒，所以你想把它放在一个定时函数中。

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

2 个答案: