摘要：紧接着就是导航栏的特效编写，殊不知，就是这个效果，让原本计划上午完成的事情，愣是被我研究了大半天才解决。刚开始我的布局是，导航栏是一个，下面有八个，分别是八个栏目。
前言
今天这篇文章的标题，显然是要搞事情。一个JS交互效果，居然花费了一天的宝贵时间才研究出来，我是不是不太适合做前端？
别急，搬好小板凳，正文从这开始～
本来今天下班回来感觉有点累，想着今天就别学了吧，正好看见停播了好久的《极限挑战》在网上放出了最新的一期。但是，今天发生在公司的一件小事儿，在我心里产生了不小的波澜，正好拿这个话题跟同行们聊聊.....
今天早晨我按时去了公司，坐在我的工位上，习惯性地点开了编辑器SublimeText（我宠幸了它三年之久～），一天的编码工作正式开始。
我的大脑高速运转，回忆了下昨天下班前的进度，以及要修改的bug，一个是替换iconfont字体图标的问题，一个是编写官网首页通用导航栏鼠标hover的交互效果，我估摸着上午先把这两个问题解决了，下午再忙其他的任务。
不一会儿，iconfont的替换工作就完成了。紧接着就是导航栏mouse over 的特效编写，殊不知，就是这个效果，让原本计划上午完成的事情，愣是被我研究了大半天才解决。二话不说，直接上图：
我先给大家说下这里要实现的效果，就是当鼠标移入导航栏的某个栏目时，顶部的4px 的蓝色滑动条要尾随着鼠标，如丝般顺滑地滑入相应栏目的顶部位置，当鼠标leave时，蓝色滑动条要退回到当前current的栏目顶部。
刚开始我的布局是，导航栏是一个ul，ul下面有八个li，分别是八个栏目。在每个li的顶部设置一个border-top: 4px solid #2ea0ff；html结构如下：
我的初步设想是，先隐藏这个border-top，然后当鼠标移入的时候，再显示出来。代码如下：
任何效果都是经过一步一步思考打磨出来的，不可能是一蹴而就。就比如这个例子，学过jQuery的同学都知道，这个效果就是很生硬的显示一条顶部边框，然后隐藏，没有动画的效果。但是jQuery的动画api辣么多，什么slideDown、slideUp、fadeIn、fadeOut、animate......
（默默地给@愚人码头打了个广告）
于是，我对代码进行了第二波改造，加上了动画效果，以下是debug现场重现：
预期的效果在浏览器上渲染出来，此时已经有了动画。但是，这还不是我想要的那个效果，后来我又想了一招，可以在每个li里添加一个span，设置为绝对定位，width默认为0，然后animate的时候，让它过渡到li的宽度。
嗯，这个想法不错，有点接近我心中的那个效果了。于是，我又折腾了一番：
这回终于有点样子了，只不过还是每个li都有一个自己的滑动条，而领导的意思是导航栏顶部只有一条公用的4px的蓝色滑动条，鼠标移入时来回切换。
此时，已将近中午，我debug 的幕后过程其实更加艰辛，不像我现在写文字时那么轻描淡写。而我旁边的同事说，看你折腾来折腾去的，干嘛那么辛苦，去网上找个插件就好了，省时省力。
当时，我只能苦笑，因为前些日子我跟着视频里写过这个例子，不过时间隔的有点久，我自己想不起当时的逻辑了。
下午又研究了大半天，突然灵光一现，想到了一招，可以在ul的外层包一层div，和ul同级新增一个span元素，这个span就是那个公用的蓝色滑动条。然后给父元素设置为相对位置，给span设置为绝对位置。然后根据鼠标移入的li的索引，计算出span要滑动的距离，这个距离就等于li的width乘以移入li的index的值，再加上每个li之间的间距。还是赶紧贴上html结构：
中途因为li的index索引停滞了好一阵子，因为index值取不到。于是，我又用原生javascript写了一遍，还是取不到值，然后又改回来jquery的写法。在经过多次翻阅jquery的api文档，多次试错之后，终于效果写出来了，以下是最终的业务代码：
在这里，我先解释下：
第一步，通过filter方法筛选出className为current的li，获得它的index，然后赋值给变量currentNum；
第二步，在浏览器刷新时初始化滑动条sliderBar的位置到指定的栏目上；
第三步，利用hover方法监控鼠标移入移出的效果，从而改变sliderBar的left的值，达到滑动的动画效果。其中，stop()方法是为了解决动画队列的问题。
以上就是我debug的过程，虽然浪费了一些时间，但是好歹问题解决了。如果你要问我，你哪来那么大的勇气，去死磕这个效果(bug)？我会告诉你，如果搁以前，我可能会在网上找个插件了事，因为在谈到javascript业务逻辑开发这块，我承认还是有不小的差距。
但是，今年我开始认真的研究了红皮书，也就是《JavaScript高级程序设计》这本被奉为经典的JS书籍。在经过不断的拜读和敲代码，现在我对自己的原生JS这块逐渐有了些许自信，明白了它的一些底层原理和概念设计。以前是只会照葫芦画瓢，现在也有了点知其然，更知其所以然的味道。
正是通过对基础的夯实，我才有了莫名的勇气去死磕这些开发中遇到的各种疑难杂症。
感谢老铁们不厌其烦的看我debug思维重现到这里，其实，闰土也是想借着这个事儿想跟大家说，前端基础真的很重要，尤其是JS！如果你基础不牢靠，一味的追逐热门框架，看似解决了工作上的一些问题。但回头想想，你的这种技术逻辑还没有形成自己的知识体系，它是松散的，是畸形的，是根基不牢靠的。学好基础再去学框架，会事半功倍，游刃有余。如果基础没打好，不注重底层原理，你的前端路注定走不远。
因为解决一个bug，浪费了一些时间，看似得不偿失，但是搞出来就算牛逼。最起码等你以后当老大了，别人问你，你就知道怎么解决，自己踩过的坑，印象最深。而不是说，以前有人帮我解决过，现在忘了。
所以说，实践是检验真理的唯一标准。网上很多文章写的有好有坏，自己去动手debug或者是实践一下，得出自己的结论才是靠谱的。
后记凌晨1点，夜已深，估计大家看到这篇文章的推送，已是明早上班赶路时。临睡之前，闰土送大家一句话：别人也没有多牛逼，你也可以在你的领域，开辟天地。
想了解我的更多动态？欢迎关注我的微信公众号：闰土哥的前端路
作者：闰土少年
链接：https://segmentfault.com/a/11...
来源：segmentfault
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/89901.html
摘要：二面休息过后，就来了第二位面试官，面我运维的，运开嘛，如果没有运维知识肯定是不行的。后来的对话中，面试官也表示，可能之前做的更多的是的工作，对于容器这块不熟悉关系也不是很大。整个三面大概也持续了要有不到一个小时。 今天给大家分享我曾经在爱奇艺的面试，过程还是比较有意思的，可以给大家一些参考 聊骚阶段 嗲妹妹：你好，我是爱奇艺的HR，我们正在招聘运维开发岗位，请问您最近有在看工作机会吗...
摘要：张鑫旭老师的文章写的很棒，解决了我的许多困惑。所以，基础知识的牢固就显得尤为重要是个不怎么听话的孩子，总是会搞出一些奇奇怪怪的事情来张鑫旭老师十年磨一剑，钻研的魔法，可见其中技术细节有多复杂。 从实习算起，到现在工作了也有一年半的时间了，在这期间，深深感受到了前端领域的飞速发展，在这里记录一下自己的成长历程，算是对知识的一个梳理，也希望帮助到刚入行的同学们。说来惭愧，大学里并没有涉...
摘要：张鑫旭老师的文章写的很棒，解决了我的许多困惑。所以，基础知识的牢固就显得尤为重要是个不怎么听话的孩子，总是会搞出一些奇奇怪怪的事情来张鑫旭老师十年磨一剑，钻研的魔法，可见其中技术细节有多复杂。 从实习算起，到现在工作了也有一年半的时间了，在这期间，深深感受到了前端领域的飞速发展，在这里记录一下自己的成长历程，算是对知识的一个梳理，也希望帮助到刚入行的同学们。说来惭愧，大学里并没有涉...
摘要：网上有很多前端的学习路径文章，大多是知识点罗列为主或是资料的汇总，数据量让新人望而却步。天了解一个前端框架。也可以关注微信公众号晓舟报告，发送获取资料，就能收到下载密码，网盘地址在最下方，获取教程和案例的资料。 前言 好的学习方法可以事半功倍，好的学习路径可以指明前进方向。这篇文章不仅要写学习路径，还要写学习方法，还要发资料，干货满满，准备接招。 网上有很多前端的学习路径文章，大多是知...
摘要：书籍如下面向对象编程指南，风格轻松易懂，比较适合初学者，原型那块儿讲得透彻，种继承方式呢。还有另一件事情是，比如发现自己某个知识点不太清楚，可以单独去百度。 作者：小不了链接：https://zhuanlan.zhihu.com/p/...来源：知乎著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 鉴于时不时，有同学私信问我（老姚，下同）怎么学前端的问题。这里统一回...
阅读 2137·2021-10-14 09:43
阅读 2198·2019-08-30 15:55
阅读 729·2019-08-30 14:23
阅读 2021·2019-08-30 13:21
阅读 1236·2019-08-30 12:50
阅读 2200·2019-08-29 18:46
阅读 2282·2019-08-29 17:28
阅读 2361·2019-08-29 17:21
