原生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 条评论
登录 后参与评论

相关文章

来自专栏数据小魔方

创意雷达图(Round Rador Chart)

今天给大家分享的图表是创意雷达图! ▽▼▽ 既然是创意雷达图,肯定是有难度的啦,单纯的雷达图太没有挑战了! 首先看成品,怎么样,还不错吧,想不想自己也做一个,如...

3815
来自专栏林德熙的博客

C# Find vs FirstOrDefault

需要知道,两个方法都是 Linq 的方法,使用之前需要引用 Linq 。对于 List 等都是继承可枚举Enumerable这时获取第一个元素可以使用First...

141
来自专栏编程

用JS 封装类似于JQ中animate的动画效果

前言:现在网上对这种类似的代码繁多,但是都是各家所长,希望源码时代H5前端讲师写的代码能够帮助到需要这样效果的朋友。 首先说一下,这篇文章对初学者有很大的帮助,...

1905
来自专栏我有一个梦想

Python 项目实践二(下载数据)第三篇

接着上节继续学习,在本章中,你将从网上下载数据,并对这些数据进行可视化。网上的数据多得难以置信,且大多未经过仔细检查。如果能够对这些数据进行分析,你就能发现别人...

2075
来自专栏前端新视界

如何编写通用的 Helper Class

Github: https://github.com/nzbin/snack-helper Docs: https://nzbin.github.io/sn...

1938
来自专栏hightopo

基于 HTML5 的 WebGL 3D 版俄罗斯方块

1183
来自专栏前端知识分享

第99天:CSS3中透视perspective

与之前的过程相同,视点与移动后的元素的连线与屏幕的焦点就是在屏幕上的呈现的元素的大小,与元素相比较变大了。

542
来自专栏mySoul

css3过渡

transition 为一个简写属性,是一个transition-property (定义过渡的属性的名称)以及 transition-duration (定义...

895
来自专栏张俊红

python在租房过程中的应用

总第84篇 01|背景介绍: 租房是再普遍不过的一件事情了,我们在租房过程中常考量的两个因素是出租房离公司的远近以及价格,而我们一般都会去链家上看相应的信息,但...

3276
来自专栏点滴积累

geotrellis使用(十四)导出定制的GeoTiff

Geotrellis系列文章链接地址http://www.cnblogs.com/shoufengwei/p/5619419.html 目录 前言 需求说...

2636

扫描关注云+社区