JavaScript 导航跟随效果实现 - 代码示例与讲解 - 常规

JavaScript 导航跟随效果实现 - 代码示例与讲解

本教程将使用 JavaScript 和 jQuery 创建一个自定义动画，实现网页导航跟随效果。当鼠标指针移入到导航的某一项时，指示条也会跟随鼠标指针移动，提升用户体验。

HTML 代码

<nav>
  <ul>
    <li><a href='#'>Home</a></li>
    <li><a href='#'>About</a></li>
    <li><a href='#'>Services</a></li>
    <li><a href='#'>Contact</a></li>
  </ul>
  <div class='indicator'></div>
</nav>

CSS 代码

nav {
  position: relative;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

li {
  margin-right: 20px;
}

a {
  display: block;
  padding: 10px;
  background-color: #ccc;
  color: #fff;
  text-decoration: none;
  transition: background-color 0.3s;
}

a:hover {
  background-color: #666;
}

.indicator {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  background-color: #333;
  transition: transform 0.3s;
}

JavaScript 代码

$(document).ready(function() {
  var nav = $('nav');
  var indicator = $('.indicator');
  var active = nav.find('a.active');
  var defaultWidth = active.outerWidth();
  var defaultLeft = active.position().left;

  indicator.css({
    width: defaultWidth,
    left: defaultLeft
  });

  nav.on('mouseenter', 'a', function() {
    var link = $(this);
    var width = link.outerWidth();
    var left = link.position().left;

    indicator.stop().animate({
      width: width,
      left: left
    }, 300);
  });

  nav.on('mouseleave', function() {
    indicator.stop().animate({
      width: defaultWidth,
      left: defaultLeft
    }, 300);
  });
});

在这个示例中，我们使用了 jQuery 库来简化代码。当文档加载完成后，我们首先获取导航和指示条的元素，以及当前活动链接的宽度和位置。

然后，我们在导航上绑定了鼠标进入和离开事件。当鼠标进入到链接时，我们获取链接的宽度和位置，并使用 animate() 方法来动态地改变指示条的宽度和位置。当鼠标离开导航时，我们将指示条恢复到默认的宽度和位置。

这样，我们就实现了一个简单的导航跟随效果。你可以根据需要对代码进行修改和扩展，以满足特定的需求。

代码解释

HTML 代码：定义导航栏结构，包含 nav 元素，以及其内部的 ul 和 li 元素，用于展示导航链接。另外添加一个 div 元素作为指示条，并设置 indicator 类名。
CSS 代码：负责导航栏的样式，包括布局、文字颜色、指示条位置、动画效果等。
JavaScript 代码：使用 jQuery 获取 DOM 元素，并添加事件监听，通过 animate() 方法实现指示条的动态跟随效果。

总结

本教程介绍了使用 JavaScript 和 jQuery 实现导航跟随效果的步骤，并提供了详细的代码示例和解释。你可以根据自己的需求，调整代码中的参数和样式，打造更符合你网站风格的导航跟随效果。