专栏首页HTML5学堂原生JS | 导航底部横线跟随鼠标缓动

原生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),作者:HTML5学堂(码匠)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 一个setInterval的小问题

    一个setInterval的小问题 HTML5学堂:在制作页面动画效果中,很多情况都会用到定时器,setInterval则是计时器的一种,可按照指定的周期,不停...

    HTML5学堂
  • PHP入门-常量基本规则

    PHP入门-常量基本规则 HTML5学堂:本文是PHP的入门用文章,主要介绍PHP的常量的基本规则以及定义和获取方法。 前几天把PHP的基本语法以及变量的基本规...

    HTML5学堂
  • 前端工程化 | 定制专属提速“外挂”(上)

    友情提示:推荐阅读时间15分钟 + 练习时间15分钟 HTML5学堂:上一期给大家分享了Gulp的安装与使用,让大家对Gulp有着初步的认识。咱们学习使用Gul...

    HTML5学堂
  • 马化腾亲自推荐!这个小程序,要成为微信大战支付宝的「利器」

    就在大家都将注意力集中在这场「科技春晚」上的时候,腾讯公司 CEO 马化腾却低调地来到了安徽合肥,为一个「微信小程序」的启用仪式亲自站台。

    知晓君
  • 【程序源代码】Spring Coud微服务管理后台脚手架

    本项目基于Spring Cloud 和Ant Design Pro实现前后端管理平台一站式脚手架,便于快速开发企业级应用。我们的愿景是 基于Copy&Paste...

    程序源代码
  • 基于DotNet构件技术的企业级敏捷软件开发平台 - AgileEAS.NET平台开发指南 - 开发流程

    过程介绍          AgileEAS.NET平台基于敏捷并行开发的一种实践,采用优秀先进的Microsoft .Net构件技术的插件式开发,AgileE...

    魏琼东
  • nodejs爬虫获取漫威超级英雄电影海报

    zhaoolee
  • python:链表定义以及实现

    链表(linked list)是一组数据项的集合,其中每个数据项都是一个节点的一部分,每个节点还包含指向下一个节点的链接.

    py3study
  • SDN和基于意图的网络(IBN)的关系

    与SDN相比,基于意图的网络(IBN)稍显稚嫩,虽然同为改变网络行业的技术,但这两者之间处于什么样的关系呢?SDN和基于意图的网络由相似之处,IBN可以视为是S...

    SDNLAB
  • 物化视图全量刷新与insert的redo生成量测试(69天)

    之前的一篇博客中提到,物化视图的全量刷新也是一种高可用性的体现,但是性能如何呢,下面来简单的测试一下。 首先需要创建一个函数,这个函数会计算当前session下...

    jeanron100

扫码关注云+社区

领取腾讯云代金券