jQuery特效 | 导航底部横线跟随鼠标缓动

HTML5学堂(码匠):jQuery来实现如下特效 - 在导航底部存在一条横线,跟随着鼠标缓动到相应导航项底部。

2月初,接收到了公众号读者的效果需求,希望能够讲解这样一个实例:

横排的导航,下边框是一条横线,随着鼠标移入某个导航,横线滑动到相应位置。

今天就针对该特效来说说如何开发(本次内容使用jQuery进行讲解,原生JavaScript代码下周一奉上)

功能效果图

功能需求明确

  • 横向导航条;
  • 当鼠标移入导航区域的时候,在当前导航底部淡入一个横线;
  • 当鼠标在导航区域当中左右移动时,横线跟随鼠标移动;
  • 当鼠标移出导航区域的时候,横线淡出。

导航跟随 - 实现

结构分析

在此功能当中,核心在于结构的搭建,导航底部的横线能够来回运动,那么该横线必然需要定位到当前导航当中,因此可以确定如下的结构代码

样式处理

  • 针对父级元素进行相对定位设置,针对子级元素(横线)设置绝对定位,并且设置left和bottom的值
  • 针对每个导航元素进行样式设置,需要注意的是,针对“当前”导航,需要给出不同于其他元素的样式(此时可以借助CSS选择器优先级来实现)

Plus:如果对定位以及选择器优先级不是太了解,可以在文章底部点击相关链接,查看HTML5学堂(码匠)之前的文章。

功能逻辑

  • 当鼠标移入具体每个导航时,设置“横线”的left值,使用animate方法实现其缓动的效果。
  • 当鼠标移入移出整个导航条时,再控制横线的显示与隐藏。

效果实现必备知识详解

  • fadeIn、fadeOut 淡入淡出动画;
  • hover事件;
  • animate 动画;
  • stop 清除动画;
  • offsetLeft系列、position()方法。

淡入淡出

$(ele).fadeIn(seconds);

$(ele).fadeIn(seconds);

fadeIn和fadeOut遵循“对象.方法”的书写方式,在fadeIn()、fadeOut()前面为需要淡入或淡出的对象,而方法括号中为参数,用于书写淡入淡出需要的时间,单位为毫秒(即如果书写的是1000,则表示1000毫秒,1000毫秒 = 1秒)。

hover事件

hover事件是jQuery中的事件,不存在于原生JavaScript当中,是mouseover(鼠标移入)与mouseout(鼠标移出)的功能综合体;

hover事件的基本语法为:

$(ele).hover(function(){
	// 鼠标移入时要执行的内容
}, function(){
	// 鼠标移出时要执行的内容
})

animate 与 stop

animate用于指定某个或某些属性发生动态效果的变化,属性与属性值以“键值对”的方式存在,如果需要进一步了解animate的相关知识,可以在文章底部点击相关链接,查看相应文章。

stop方法用于清除掉原有的动画。在用户交互过程中,有可能会出现前一个动画还没有结束,新的动画就开启了,为了防止这个问题,我们通常根据需求在动画类效果的前面添加“stop()”方法,用于清除掉当前动画。stop方法存在两个参数,参数均为布尔值(true或false)。

  • stop(); 停止当前动画 (动画队列当中的动画会继续执行)
  • stop(true); 停止当前所有动画
  • stop(true, true); 停止当前所有动画,但允许完成当前动画。

offsetLeft 与 position()方法

offsetLeft是JavaScript原生方法,ele.offsetLeft中,ele表示具体元素,元素的offsetLeft属性,表示该元素左侧与父级元素的距离;

position()方法是jQuery的方法,$(ele).position().left表示元素与其相对定位元素左边的距离。

Plus:如果希望对this以及offsetLeft做详细了解,可以在文章底部点击相关链接,查看相应文章。

关于完整代码

如需查看完整代码,请前往:http://codepen.io/majiang/pen/zZGdKW

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

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

原文发表时间:2017-02-27

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏java架构师

解决ASP.NET中的各种乱码问题

经常发现有人被乱码困扰着,而我感觉比较幸运,很少为此烦恼过。 在这篇博客中,我将把我想到的一些与乱码有关的经验总结出来,供大家参考。 页面显示乱码问题 在一...

2896
来自专栏Python中文社区

Scrapy基础——CrawlSpider详解

專 欄 ❈hotpot,Python中文社区专栏作者 博客: http://www.jianshu.com/u/9ea40b5f607a ❈ CrawlSpi...

3008
来自专栏GreenLeaves

Js框架设计之DomReady

一、在介绍DomReady之前,先了解下相关的知识 1、HTML是一种标记语言,告诉我们这页面里面有什么内容,但是行为交互则要通过DOM操作来实现,但是注意:不...

2036
来自专栏有趣的Python

Python:Scrapy分布式爬虫打造搜索引擎集合篇 -(一)到(八)完整版Python分布式爬虫打造搜索引擎

Python分布式爬虫打造搜索引擎 基于Scrapy、Redis、elasticsearch和django打造一个完整的搜索引擎网站 本教程一共八章:从零开始...

7124
来自专栏北京马哥教育

ansible之playbook功能简述

playbooks剧本简介 playbooks是ansible更为强大的配置管理组件,实现基于文本文件编排执行的多个任务,且多次重复执行。其是使用YAML(Ye...

2645
来自专栏Java技术分享

第四章:Shiro的身份认证(Authentication)——深入浅出学Shiro细粒度权限开发框架

Authentication概述 概述   Authentication 是指身份验证的过程——即证明一个用户实际上是不是他们所说的他们是谁。也就是说通过提交...

2105
来自专栏数据之美

关于 xargs 参数被截断,tar 文件被覆盖的问题

问题: 目录下共 2W+ 个小文件: $ find . -type f | wc -l   20083   如果我们这样打包,会爆出 "Arg...

1796
来自专栏DeveWork

自定义WordPress 标签云小工具相关参数

相信你知道WordPress 标签云widget(小工具)是什么,如果你的WordPress 主题支持小工具,就可以在后台启用标签云小工具,该小工具不仅能展示标...

1848
来自专栏生信宝典

Linux学习 - 常用和不太常用的实用awk命令

Linux学习系列文章是生信宝典最开始主推的一块,力图从一个新额视角帮助初学者快速入门Linux系统,熟悉Linux下的文件和目录,文件操作, 文件内容操作。而...

18110
来自专栏技术博文

浅谈开启magic_quotes_gpc后的sql注入攻与防

通过启用php.ini配置文件中的相关选项,就可以将大部分想利用SQL注入漏洞的骇客拒绝于门外。        开启magic_quotes_gpc=on之后,...

3435

扫描关注云+社区