前言

今天這篇文章的標(biāo)題，顯然是要搞事情。一個JS交互效果，居然花費(fèi)了一天的寶貴時間才研究出來，我是不是不太適合做前端？

別急，搬好小板凳，正文從這開始～

本來今天下班回來感覺有點(diǎn)累，想著今天就別學(xué)了吧，正好看見停播了好久的《極限挑戰(zhàn)》在網(wǎng)上放出了最新的一期。但是，今天發(fā)生在公司的一件小事兒，在我心里產(chǎn)生了不小的波瀾，正好拿這個話題跟同行們聊聊.....

今天早晨我按時去了公司，坐在我的工位上，習(xí)慣性地點(diǎn)開了編輯器SublimeText（我寵幸了它三年之久～），一天的編碼工作正式開始。

我的大腦高速運(yùn)轉(zhuǎn)，回憶了下昨天下班前的進(jìn)度，以及要修改的bug，一個是替換iconfont字體圖標(biāo)的問題，一個是編寫官網(wǎng)首頁通用導(dǎo)航欄鼠標(biāo)hover的交互效果，我估摸著上午先把這兩個問題解決了，下午再忙其他的任務(wù)。

不一會兒，iconfont的替換工作就完成了。緊接著就是導(dǎo)航欄mouse over 的特效編寫，殊不知，就是這個效果，讓原本計(jì)劃上午完成的事情，愣是被我研究了大半天才解決。二話不說，直接上圖：

我先給大家說下這里要實(shí)現(xiàn)的效果，就是當(dāng)鼠標(biāo)移入導(dǎo)航欄的某個欄目時，頂部的4px 的藍(lán)色滑動條要尾隨著鼠標(biāo)，如絲般順滑地滑入相應(yīng)欄目的頂部位置，當(dāng)鼠標(biāo)leave時，藍(lán)色滑動條要退回到當(dāng)前current的欄目頂部。

剛開始我的布局是，導(dǎo)航欄是一個ul，ul下面有八個li，分別是八個欄目。在每個li的頂部設(shè)置一個border-top: 4px solid #2ea0ff；html結(jié)構(gòu)如下：

我的初步設(shè)想是，先隱藏這個border-top，然后當(dāng)鼠標(biāo)移入的時候，再顯示出來。代碼如下：

任何效果都是經(jīng)過一步一步思考打磨出來的，不可能是一蹴而就。就比如這個例子，學(xué)過jQuery的同學(xué)都知道，這個效果就是很生硬的顯示一條頂部邊框，然后隱藏，沒有動畫的效果。但是jQuery的動畫api辣么多，什么slideDown、slideUp、fadeIn、fadeOut、animate......

（默默地給@愚人碼頭打了個廣告）

于是，我對代碼進(jìn)行了第二波改造，加上了動畫效果，以下是debug現(xiàn)場重現(xiàn)：

預(yù)期的效果在瀏覽器上渲染出來，此時已經(jīng)有了動畫。但是，這還不是我想要的那個效果，后來我又想了一招，可以在每個li里添加一個span，設(shè)置為絕對定位，width默認(rèn)為0，然后animate的時候，讓它過渡到li的寬度。

嗯，這個想法不錯，有點(diǎn)接近我心中的那個效果了。于是，我又折騰了一番：

這回終于有點(diǎn)樣子了，只不過還是每個li都有一個自己的滑動條，而領(lǐng)導(dǎo)的意思是導(dǎo)航欄頂部只有一條公用的4px的藍(lán)色滑動條，鼠標(biāo)移入時來回切換。

此時，已將近中午，我debug 的幕后過程其實(shí)更加艱辛，不像我現(xiàn)在寫文字時那么輕描淡寫。而我旁邊的同事說，看你折騰來折騰去的，干嘛那么辛苦，去網(wǎng)上找個插件就好了，省時省力。

當(dāng)時，我只能苦笑，因?yàn)榍靶┤兆游腋曨l里寫過這個例子，不過時間隔的有點(diǎn)久，我自己想不起當(dāng)時的邏輯了。

下午又研究了大半天，突然靈光一現(xiàn)，想到了一招，可以在ul的外層包一層div，和ul同級新增一個span元素，這個span就是那個公用的藍(lán)色滑動條。然后給父元素設(shè)置為相對位置，給span設(shè)置為絕對位置。然后根據(jù)鼠標(biāo)移入的li的索引，計(jì)算出span要滑動的距離，這個距離就等于li的width乘以移入li的index的值，再加上每個li之間的間距。還是趕緊貼上html結(jié)構(gòu)：

中途因?yàn)閘i的index索引停滯了好一陣子，因?yàn)閕ndex值取不到。于是，我又用原生javascript寫了一遍，還是取不到值，然后又改回來jquery的寫法。在經(jīng)過多次翻閱jquery的api文檔，多次試錯之后，終于效果寫出來了，以下是最終的業(yè)務(wù)代碼：

在這里，我先解釋下：

第一步，通過filter方法篩選出className為current的li，獲得它的index，然后賦值給變量currentNum；

第二步，在瀏覽器刷新時初始化滑動條sliderBar的位置到指定的欄目上；

第三步，利用hover方法監(jiān)控鼠標(biāo)移入移出的效果，從而改變sliderBar的left的值，達(dá)到滑動的動畫效果。其中，stop()方法是為了解決動畫隊(duì)列的問題。

以上就是我debug的過程，雖然浪費(fèi)了一些時間，但是好歹問題解決了。如果你要問我，你哪來那么大的勇氣，去死磕這個效果(bug)？我會告訴你，如果擱以前，我可能會在網(wǎng)上找個插件了事，因?yàn)樵谡劦絡(luò)avascript業(yè)務(wù)邏輯開發(fā)這塊，我承認(rèn)還是有不小的差距。

但是，今年我開始認(rèn)真的研究了紅皮書，也就是《JavaScript高級程序設(shè)計(jì)》這本被奉為經(jīng)典的JS書籍。在經(jīng)過不斷的拜讀和敲代碼，現(xiàn)在我對自己的原生JS這塊逐漸有了些許自信，明白了它的一些底層原理和概念設(shè)計(jì)。以前是只會照葫蘆畫瓢，現(xiàn)在也有了點(diǎn)知其然，更知其所以然的味道。

正是通過對基礎(chǔ)的夯實(shí)，我才有了莫名的勇氣去死磕這些開發(fā)中遇到的各種疑難雜癥。

感謝老鐵們不厭其煩的看我debug思維重現(xiàn)到這里，其實(shí)，閏土也是想借著這個事兒想跟大家說，前端基礎(chǔ)真的很重要，尤其是JS！如果你基礎(chǔ)不牢靠，一味的追逐熱門框架，看似解決了工作上的一些問題。但回頭想想，你的這種技術(shù)邏輯還沒有形成自己的知識體系，它是松散的，是畸形的，是根基不牢靠的。學(xué)好基礎(chǔ)再去學(xué)框架，會事半功倍，游刃有余。如果基礎(chǔ)沒打好，不注重底層原理，你的前端路注定走不遠(yuǎn)。

因?yàn)榻鉀Q一個bug，浪費(fèi)了一些時間，看似得不償失，但是搞出來就算牛逼。最起碼等你以后當(dāng)老大了，別人問你，你就知道怎么解決，自己踩過的坑，印象最深。而不是說，以前有人幫我解決過，現(xiàn)在忘了。

所以說，實(shí)踐是檢驗(yàn)真理的唯一標(biāo)準(zhǔn)。網(wǎng)上很多文章寫的有好有壞，自己去動手debug或者是實(shí)踐一下，得出自己的結(jié)論才是靠譜的。

后記

凌晨1點(diǎn)，夜已深，估計(jì)大家看到這篇文章的推送，已是明早上班趕路時。臨睡之前，閏土送大家一句話：別人也沒有多牛逼，你也可以在你的領(lǐng)域，開辟天地。

聲明

歡迎轉(zhuǎn)載，請注明出處和作者，同時保留聲明。

作者：閏土少年

出處：http://www.cnblogs.com/running-runtu/

本博客的文章如無特殊說明，均為原創(chuàng)，轉(zhuǎn)載請注明出處。如未經(jīng)作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責(zé)任的權(quán)利。