JS实现常用导航鼠标下经过下方横线自动跟随效果

下面我将详细讲解“JS实现常用导航鼠标下经过下方横线自动跟随效果”的完整攻略。本攻略将分以下几步实现：

1. 搜集导航标签及下方横线元素；
2. 获取每个导航标签的位置信息，计算出下方横线的初始位置信息；
3. 监听鼠标移入导航标签事件，将下方横线移动到当前导航标签下方；
4. 监听鼠标移出导航标签事件，将下方横线移回初始位置。

在说明的过程中将涉及两个示例以更好的展示效果。

1. 搜集导航标签及下方横线元素

首先，我们需要在HTML代码中添加导航标签和下方横线的元素。可以使用无序列表（<ul>元素）和列表项（<li>元素）模拟导航标签，下方横线可以使用<div>元素实现，如下所示：

<ul class="nav">
  <li><a href="#">首页</a></li>
  <li><a href="#">新闻</a></li>
  <li><a href="#">产品</a></li>
  <li><a href="#">联系我们</a></li>
</ul>
<div class="line"></div>

其中，导航标签的类名为nav，下方横线的类名为line，该元素初始时应该位于第一个导航标签下方。

2. 获取每个导航标签的位置信息，计算出下方横线的初始位置信息

为了实现下方横线跟随导航标签移动的效果，我们需要获取每个导航标签的位置信息，计算出下方横线的初始位置信息。我们可以使用JavaScript中的getBoundingClientRect()方法获取元素的位置信息。

// 获取导航标签和下方横线元素
const navItems = document.querySelectorAll('.nav li');
const line = document.querySelector('.line');

// 获取第一个导航标签的位置信息
const firstItem = navItems[0].getBoundingClientRect();

// 计算下方横线的初始位置信息
line.style.width = firstItem.width + 'px';
line.style.left = firstItem.left + 'px';
line.style.top = firstItem.bottom + 'px';

在上述示例中，我们使用了querySelectorAll()方法获取所有导航标签，使用querySelector()方法获取下方横线，然后使用getBoundingClientRect()方法获取第一个导航标签的位置信息，最后计算出下方横线的初始位置信息并设置相应的样式。

3. 监听鼠标移入导航标签事件，将下方横线移动到当前导航标签下方

接下来，我们需要监听鼠标移入导航标签的事件，并实现下方横线跟随移动到当前导航标签下方的效果。在事件处理函数中，我们可以使用上一步中获取到的每个导航标签的位置信息计算出下方横线应该移动到的位置，并设置相应的样式即可。

// 监听鼠标移入导航标签事件
navItems.forEach(item => {
  item.addEventListener('mouseenter', e => {
    const currentItem = e.target.getBoundingClientRect();
    line.style.width = currentItem.width + 'px';
    line.style.left = currentItem.left + 'px';
    line.style.top = currentItem.bottom + 'px';
  });
});

在上述示例中，我们使用forEach()方法遍历所有导航标签，并为每个导航标签添加了mouseenter事件监听器，当鼠标移入导航标签时，我们使用getBoundingClientRect()方法获取当前导航标签的位置信息，计算出下方横线应该移动到的位置，并设置相应的样式即可。

4. 监听鼠标移出导航标签事件，将下方横线移回初始位置

最后，我们需要监听鼠标移出导航标签的事件，并将下方横线移回初始位置。在事件处理函数中，我们只需要将下方横线的位置设置为第一个导航标签的位置即可。

// 监听鼠标移出导航标签事件
navItems.forEach(item => {
  item.addEventListener('mouseleave', () => {
    const firstItem = navItems[0].getBoundingClientRect();
    line.style.width = firstItem.width + 'px';
    line.style.left = firstItem.left + 'px';
    line.style.top = firstItem.bottom + 'px';
  });
});

在上述示例中，我们使用forEach()方法遍历所有导航标签，并为每个导航标签添加了mouseleave事件监听器，当鼠标移出导航标签时，我们只需要将下方横线的位置设置为第一个导航标签的位置即可。

至此，我们已经完成了“JS实现常用导航鼠标下经过下方横线自动跟随效果”的完整攻略。