功能效果
功能需求明确
鼠标跟随特效
结构分析
与jQuery实现方法当中使用的结构有所不同,为了更好的获取标签,所以使用如下代码结构:
样式处理
样式方面与此前没有什么变化,依旧使用定位的思路来实现,此处不再重复给出样式代码,如果需要可以查看上一篇jQ特效文章(该文章底部有相应链接),或点击文章底部的“阅读原文”,查看源代码。
Plus:上次有朋友为公众号留言,说可以使用元素的底部边框来实现。此处需要说明,该效果的动画效果,是底部横线从一个位置渐变到一个位置,a标签的底部边框无法实现该效果,但是可以用一个其他元素定位在a标签底部,为该标签设置底部边框,再实现运动。
该效果的实现根据思路不同也有所不同,所以,请不要拘泥于一种实现方法。
原生JS功能实现
功能代码解析
逻辑(原生JS)实现相关知识
计时器
通过计时器(此处使用的是setTimeout),实现在一定时间间隔之后,执行一次函数当中的功能。通过递归调用,实现计时器的多次调用。
为了防止调用多个动画的问题(鼠标先后移入多个导航时),需要在开始一个新动画之前先清除原有的计时器。
关于具体的计时器知识,可详见底部相关文章。
缓冲运动
此处效果当中使用了缓冲运动,即随着距离的缩短,每次运动的距离也越来越少。基本计算方法就是用终点目标减去当前位置,然后除以固定的一个数值(可以简单的认为是步数)。当前位置到目标位置的距离越长,每一步的长度也就越大;当前位置越接近目标位置,每一步的长度也就越小,从而实现缓冲的运动效果。
数学对象
在JS当中,最小的单位为1像素,对于缓冲运动当中,所计算出的缓冲结果是存在小数的,这些小数需要计算为整数再做处理。
Math.ceil() 与 Math.floor() 用于将所得的数字强制进位或舍去。对于距离大于0的部分,在出现小数点的时候,应当向上进位(使用Math.ceil()方法),对于距离小于0的部分,在出现小数点的时候,应当向下退位,如将“-0.9”舍为“-1”(使用Math.floor()方法)
关于具体的数学对象方法,可详见底部相关文章。
关于完整代码
如需查看完整代码,请前往:http://codepen.io/majiang/pen/JWRdBB
(有可能因为网络原因,导致加载速度较慢)。