原生JS | 导航底部横线跟随鼠标缓动

功能效果

功能需求明确

• 横向导航条；
• 当鼠标在导航区域当中左右移动时，横线跟随鼠标移动。

鼠标跟随特效

结构分析

与jQuery实现方法当中使用的结构有所不同，为了更好的获取标签，所以使用如下代码结构：

样式处理

样式方面与此前没有什么变化，依旧使用定位的思路来实现，此处不再重复给出样式代码，如果需要可以查看上一篇jQ特效文章（该文章底部有相应链接），或点击文章底部的“阅读原文”，查看源代码。

Plus：上次有朋友为公众号留言，说可以使用元素的底部边框来实现。此处需要说明，该效果的动画效果，是底部横线从一个位置渐变到一个位置，a标签的底部边框无法实现该效果，但是可以用一个其他元素定位在a标签底部，为该标签设置底部边框，再实现运动。

该效果的实现根据思路不同也有所不同，所以，请不要拘泥于一种实现方法。

原生JS功能实现

功能代码解析

• 在该效果中，由于鼠标移入淡入或淡出的功能代码的原理与jQuery基本类似，所以不做重复书写，只实现导航底部跟随的效果。
• 首先进行位置初始化（如果没有初始化，在第一次通过ele.style.left属性获取left的值时，是一个控制）；
• 之后为每个导航绑定鼠标移入事件。当鼠标移入时，获取当前位置和目标位置，之后调用运动功能函数（move），需要注意的是，为了防止计时器的叠加，在开始新的运动之前需要先清除原有的计时器；
• 在运动函数（move）当中，有两个参数用于接收运动的起点和终点，由于进行缓冲运动（随着距离的缩短，每次运动的步长也有所变短），需要针对数字进行合理的取整处理；
• 此后将每次运动的新值，赋值给line的left属性；
• 最后判断运动是否已经到达终点，如果达到终点则停止运动，否则就继续调用计时器，再次执行move函数（与前一次move函数不同之处，在于参数值不同）。

逻辑（原生JS）实现相关知识

• 计时器；
• 缓冲运动；
• 数学对象。

计时器

通过计时器（此处使用的是setTimeout），实现在一定时间间隔之后，执行一次函数当中的功能。通过递归调用，实现计时器的多次调用。

为了防止调用多个动画的问题（鼠标先后移入多个导航时），需要在开始一个新动画之前先清除原有的计时器。

关于具体的计时器知识，可详见底部相关文章。

缓冲运动

此处效果当中使用了缓冲运动，即随着距离的缩短，每次运动的距离也越来越少。基本计算方法就是用终点目标减去当前位置，然后除以固定的一个数值（可以简单的认为是步数）。当前位置到目标位置的距离越长，每一步的长度也就越大；当前位置越接近目标位置，每一步的长度也就越小，从而实现缓冲的运动效果。

数学对象

在JS当中，最小的单位为1像素，对于缓冲运动当中，所计算出的缓冲结果是存在小数的，这些小数需要计算为整数再做处理。

Math.ceil() 与 Math.floor() 用于将所得的数字强制进位或舍去。对于距离大于0的部分，在出现小数点的时候，应当向上进位（使用Math.ceil()方法），对于距离小于0的部分，在出现小数点的时候，应当向下退位，如将“-0.9”舍为“-1”（使用Math.floor()方法）

关于具体的数学对象方法，可详见底部相关文章。

关于完整代码

如需查看完整代码，请前往：http://codepen.io/majiang/pen/JWRdBB

（有可能因为网络原因，导致加载速度较慢）。