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
(有可能因为网络原因,导致加载速度较慢)。
- 让 MyBatis Generator 变的更简单
- SpringMVC【参数绑定、数据回显、文件上传】
- SDNLAB技术分享(五):浅谈Open vSwitch移植
- SpringMVC【校验器、统一处理异常、RESTful、拦截器】
- OpenStack与SDN控制器的集成
- 使用机器学习算法对流量分类的尝试——基于样本分类
- 曾经做过的40道程序设计课后习题总结(一)
- 基于ODL与Pica8交换机端到端的限速实验
- SpringBoot就是这么简单
- SpringData JPA就是这么简单
- Openflow细节理解之—Buffer_id篇
- 移动商城项目总结
- 移动商城第一篇【搭建项目环境+数据模型】
- 移动商城第二篇(品牌管理模块)【文件上传、数据校验、CRUD】
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android Webview与ScrollView的滚动兼容及留白处理的方法
- Android AOP框架AspectJ使用详解
- android仿Adapter实现自定义PagerAdapter方法示例
- android绘制几何图形的实例代码
- Android ListView控件使用方法
- Android开发之Android.mk模板的实例详解
- android实现文件下载功能
- Android实现可以展开的TextView
- 详解android 用webview加载网页(https和http)
- Android自定义网络连接工具类HttpUtil
- Android Studio时间选择器的创建方法
- Android 拦截返回键事件的实例详解
- Android自定义可点击的ImageSpan并在TextView中内置View
- Android开发实现带清空按钮的EditText示例
- Android用于校验集合参数的小封装示例