JavaScript & jQuery 实现导航跟随效果 - 代码示例

使用 JavaScript 和 jQuery 实现导航跟随效果

本教程将使用 JavaScript、HTML5 和 jQuery，创建自定义动画，实现导航跟随效果。当鼠标指针移入导航的某一项时，指示条会跟随鼠标指针移动。

HTML 代码

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

CSS 代码

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 10px;
  background-color: #333;
  color: #fff;
}
nav ul {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
nav ul li {
  margin-right: 20px;
}
nav ul li:last-child {
  margin-right: 0;
}
nav ul li a {
  color: #fff;
  text-decoration: none;
  font-size: 18px;
  padding: 10px;
  transition: all 0.3s ease;
}
nav ul li a:hover {
  background-color: #fff;
  color: #333;
}
.indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background-color: #fff;
  transition: all 0.3s ease;
}

JavaScript 代码

$(document).ready(function() {
  var $nav = $('nav');
  var $indicator = $('.indicator');
  var $link = $('nav ul li a');

  $nav.on('mouseenter', 'li', function() {
    var $this = $(this);
    var leftPos = $this.position().left;
    var newWidth = $this.width();
    $indicator.stop().animate({
      left: leftPos,
      width: newWidth
    });
  });

  $nav.on('mouseleave', function() {
    $indicator.stop().animate({
      left: $link.filter('.active').position().left,
      width: $link.filter('.active').width()
    });
  });

  $link.on('click', function() {
    $link.removeClass('active');
    $(this).addClass('active');
    var $this = $(this);
    var leftPos = $this.position().left;
    var newWidth = $this.width();
    $indicator.stop().animate({
      left: leftPos,
      width: newWidth
    });
  });
});

实现效果

代码说明：

1. HTML 代码: 创建一个导航栏，包含一个 ul 元素用于存放导航链接，以及一个 div 元素用于表示指示条。
2. CSS 代码: 设置导航栏和指示条的样式，包括颜色、位置、大小等。
3. JavaScript 代码:

• 使用 jQuery 获取导航栏、指示条和导航链接的元素。
• 监听鼠标进入导航栏 li 元素的事件，获取 li 元素的位置和宽度，并设置指示条的位置和宽度。
• 监听鼠标离开导航栏的事件，获取当前活动的导航链接位置和宽度，并设置指示条的位置和宽度。
• 监听导航链接点击事件，添加 active 类到当前活动的导航链接，并更新指示条的位置和宽度。

通过以上代码，即可实现导航跟随效果，当鼠标指针移入导航的某一项时，指示条会跟随鼠标指针移动。