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
(有可能因为网络原因,导致加载速度较慢)。
- 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 数组属性和方法
- Pots(POJ - 3414)【BFS 寻找最短路+路径输出】
- Vue路由Hash模式分析
- Flutter基础widgets教程-CupertinoButton篇
- 利用TfidfVectorizer进行中文文本分类(数据集是复旦中文语料)
- 组合模式
- Js中数组空位问题
- 反转字符串
- Prime Path(POJ - 3126)【BFS+筛素数】
- (leetcode每日打卡)秋叶收藏集【动态规划】
- 设计模式~调停者模式(Mediator)
- Sequential Nim(CodeForces - 1382B)【博弈】
- Less Coin Tosses(Gym - 102346L)【打表+找规律】
- leetcode1558题解【贪心】
- 如何将炫酷的报表直接截图发送邮件——在Superset 0.37使用Schedule Email功能
- Kafka监控必备——Kafka-Eagle 2.0.2正式发布