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

HTML5学堂(码匠):在上周当中,我们用jQuery实现了 - 在导航底部存在一条横线,跟随着鼠标缓动到相应导航项 - 的特效,今天我们来讲讲原生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

(有可能因为网络原因,导致加载速度较慢)。

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2017-03-06

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏xingoo, 一个梦想做发明家的程序员

Elasticsearch——multi termvectors的用法

前一篇已经翻译过termvectors的使用方法了,这对于学习如何使用tf-idf来说是很有帮助的了。 更多内容参考我整理的ELK教程 什么是TF-ID...

19310
来自专栏烙馅饼喽的技术分享

Silverlight像素着色器编写简明指南 附送文字描边效果

      在玩很多flash网页游戏的时候,看到它们都有非常清晰的宋体字,并且有漂亮的描边效果。如图,这是战将传奇的登录界面中的文字。 ? 对比之下,silv...

1827
来自专栏AI科技大本营的专栏

汉语转拼音工具、新华字典API——两个支持Python的中文资源

【导读】平常为大家推荐的资源中,以英语语言占据大多数。今天 AI科技大本营特别要为大家推荐两个跟中文相关的资源工具。先简单介绍下这两个资源工具都是什么。第一个,...

653
来自专栏祥子的故事

python | pandas 改变列的位置、填充缺失值

2564
来自专栏游戏开发那些事

【Unity游戏开发】UGUI不规则区域点击的实现

  马三从上一家公司离职了,最近一直在出去面试,忙得很,所以这一篇博客拖到现在才写出来。马三在上家公司工作的时候,曾处理了一个UGUI不规则区域点击的问题,制作...

1193
来自专栏潇涧技术专栏

When Math meets Android Animation (1)

当数学遇上动画:讲述ValueAnimator、TypeEvaluator和TimeInterpolator之间的恩恩怨怨(1)

822
来自专栏SeanCheney的专栏

《利用Python进行数据分析·第2版》第9章 绘图和可视化9.1 matplotlib API入门9.2 使用pandas和seaborn绘图9.3 其它的Python可视化工具9.4 总结

信息可视化(也叫绘图)是数据分析中最重要的工作之一。它可能是探索过程的一部分,例如,帮助我们找出异常值、必要的数据转换、得出有关模型的idea等。另外,做一个可...

6979
来自专栏Python数据科学

快速入门Matplotlib教程

Matplotlib 可能是 Python 2D-绘图领域使用最广泛的套件。它能让使用者很轻松地将数据图形化,并且提供多样化的输出格式。这里将会探索 matpl...

571
来自专栏算法+

mp3格式转wav格式 附完整C++算法实现代码

近期偶然间看到一个开源项目minimp3 Minimalistic MP3 decoder single header library 项目地址: https:...

5245
来自专栏Material Design组件

Material Design — 网格列表(Grid lists)

31712

扫码关注云+社区