即日起在codingBlog上分享您的技术经验即可获得积分,积分可兑换现金哦。

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

微信 HTML5学堂 17℃ 0评论

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做详细了解,可以在文章底部点击相关链接,查看相应文章。

关于完整代码

如需查看完整代码,请点击文章底部左下角的【阅读原文】(有可能因为网络原因,导致加载速度较慢)。

致亲爱的读者们

有不少公众号读者为我们留言,希望能够讲解一些效果或知识。

我们很高兴收到大家的留言,对于知识量比较庞大、不适宜短时间阅读的知识或技术内容,我们日后会考虑在其他媒体平台中以其他的方式呈现出来;

对于效果类或知识量较小的技术类问题,我们会进行筛选,在一定时间之后发布出来。(原创文章都是提前两三周确定题目,然后书写、测试、排版,需要有一个时间周期)

相关文章链接:

点击下方“阅读原文”查看效果案例

↓↓↓ 

转载请注明:CodingBlog » jQuery特效 | 导航底部横线跟随鼠标缓动

喜欢 (0)or分享 (0)
发表我的评论
取消评论

*

表情
(7)个小伙伴在吐槽
  1. 需求被实现了哈,感谢,很用心
    漆伟2017-02-27 11:43 回复
  2. 有视频吗?
    强男2017-02-27 11:47 回复
  3. 用border-bottom不就行了吗?
    function2017-02-28 16:34 回复
  4. 特别实用,不过对你的进行了改进,不是下面的白线而是背景色/阴险互相学习
    唐僧洗头爱飘柔2017-03-02 01:36 回复
  5. 麻麻,我需要一罐六个核桃/微笑
    里小白2017-03-02 12:03 回复
  6. 请教下,我把代码构造了一个html页面,鼠标滑过没有出现预期的效果呢。这个如何排查问题?
    张三李四的张三®2017-03-03 09:52 回复
  7. border-bottom实现不了跟随吧~
    肥肥肥肥饼2017-03-08 06:02 回复