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

相关文章

来自专栏小灰灰

cocos2dx-v3.4 2048(四):单元格的设计与实现

前言 ---- 单元格即显示2、4、8等数字的不同颜色的方格,如下图。本项目中Grid类实现单元格的相关内容,包括数字、背景更新,移动、新增、消除特效 ? ...

1866
来自专栏进击的君君的前端之路

CSS理解之border

1323
来自专栏cnblogs

Css3新特性总结之边框与背景(二)

一、条纹背景 利用background为linear-gradient函数实现,linear-gradient取值如下: <angle>:角度,渐变的方向 t...

1829
来自专栏向治洪

Android开发之Path详解

在制作高级控件的时候往往会用到很多的高级数学公式,例如本文将要讲到的贝塞尔曲线,结合Path使用,可以实现很多复杂的动画效果。 一.Path常用方法表 作...

3485
来自专栏王金龙的专栏

svg.js教程及使用手册详解(二)

上篇简要介绍了svg.js的基本信息和基本用法,这篇开始详细讲解svg.js的用法。

914
来自专栏向治洪

android绘制虚线

有的时候我们需要一种虚线效果,比如图片的边框,愤怒的小鸟的飞翔路径,那么怎么绘制这些虚线呢?方法很多,目前我觉得好的有两种: 一、自己创建模式,一个点一个点的绘...

2036
来自专栏Android机动车

用数学思维实现雷达分析图

前段时间回看里约奥运会的国球比赛,岛国媒体给我龙队一个响亮的称号—— 六边形战士 !

932
来自专栏知晓程序

开发 | 「小游戏」开发难?不妨先从 2048 入手试试看

最近流行微信「跳一跳」小游戏,我也心血来潮写了一个微信小程序版 2048,本篇文章主要分享实现 2048 的算法以及注意的点,一起来学习吧!

1224
来自专栏Java帮帮-微信公众号-技术文章全总结

【Java案例】打印五环

案例描述 在屏幕上画出奥运五环旗,如图1.7所示。 ? 图1.7 奥运五环旗 案例分析 观察奥运五环旗的图案,直观的感觉,由五个圆组成,每个圆的颜色不一样...

3215
来自专栏程序员的诗和远方

一个比想象中更骚气的圆-svg实现

之前写了一篇Canvas画图-一个比想象中更骚气的圆(渐变圆环),其实SVG也可以实现类似的效果,而且两者api惊人的相似。 关于SVG SVG是一种矢量...

3107

扫码关注云+社区