前言
今天這篇文章的標(biāo)題，顯然是要搞事情参歹。一個(gè)JS交互效果仰楚，居然花費(fèi)了一天的寶貴時(shí)間才研究出來，我是不是不太適合做前端犬庇？
別急僧界，搬好小板凳，正文從這開始～
本來今天下班回來感覺有點(diǎn)累臭挽，想著今天就別學(xué)了吧捂襟，正好看見停播了好久的《極限挑戰(zhàn)》在網(wǎng)上放出了最新的一期。但是欢峰，今天發(fā)生在公司的一件小事兒葬荷，在我心里產(chǎn)生了不小的波瀾涨共，正好拿這個(gè)話題跟同行們聊聊.....
今天早晨我按時(shí)去了公司，坐在我的工位上宠漩，習(xí)慣性地點(diǎn)開了編輯器SublimeText（我寵幸了它三年之久～）举反，一天的編碼工作正式開始。
我的大腦高速運(yùn)轉(zhuǎn)扒吁，回憶了下昨天下班前的進(jìn)度火鼻，以及要修改的bug，一個(gè)是替換iconfont字體圖標(biāo)的問題雕崩，一個(gè)是編寫官網(wǎng)首頁通用導(dǎo)航欄鼠標(biāo)hover的交互效果魁索，我估摸著上午先把這兩個(gè)問題解決了，下午再忙其他的任務(wù)晨逝。
不一會(huì)兒蛾默，iconfont的替換工作就完成了。緊接著就是導(dǎo)航欄mouse over 的特效編寫捉貌，殊不知支鸡，就是這個(gè)效果，讓原本計(jì)劃上午完成的事情趁窃，愣是被我研究了大半天才解決牧挣。二話不說，直接上圖：
我先給大家說下這里要實(shí)現(xiàn)的效果醒陆，就是當(dāng)鼠標(biāo)移入導(dǎo)航欄的某個(gè)欄目時(shí)瀑构，頂部的4px 的藍(lán)色滑動(dòng)條要尾隨著鼠標(biāo)，如絲般順滑地滑入相應(yīng)欄目的頂部位置刨摩，當(dāng)鼠標(biāo)leave時(shí)寺晌，藍(lán)色滑動(dòng)條要退回到當(dāng)前current的欄目頂部。
剛開始我的布局是澡刹，導(dǎo)航欄是一個(gè)ul呻征，ul下面有八個(gè)li，分別是八個(gè)欄目罢浇。在每個(gè)li的頂部設(shè)置一個(gè)border-top: 4px solid #2ea0ff陆赋；html結(jié)構(gòu)如下：
我的初步設(shè)想是，先隱藏這個(gè)border-top嚷闭，然后當(dāng)鼠標(biāo)移入的時(shí)候攒岛，再顯示出來。代碼如下：
任何效果都是經(jīng)過一步一步思考打磨出來的胞锰，不可能是一蹴而就灾锯。就比如這個(gè)例子，學(xué)過jQuery的同學(xué)都知道嗅榕，這個(gè)效果就是很生硬的顯示一條頂部邊框顺饮，然后隱藏色乾，沒有動(dòng)畫的效果。但是jQuery的動(dòng)畫api辣么多领突，什么slideDown、slideUp案怯、fadeIn君旦、fadeOut、animate......
（默默地給@愚人碼頭打了個(gè)廣告）
于是嘲碱，我對(duì)代碼進(jìn)行了第二波改造金砍，加上了動(dòng)畫效果，以下是debug現(xiàn)場(chǎng)重現(xiàn)：
預(yù)期的效果在瀏覽器上渲染出來麦锯，此時(shí)已經(jīng)有了動(dòng)畫恕稠。但是，這還不是我想要的那個(gè)效果扶欣，后來我又想了一招鹅巍，可以在每個(gè)li里添加一個(gè)span，設(shè)置為絕對(duì)定位料祠，width默認(rèn)為0骆捧，然后animate的時(shí)候，讓它過渡到li的寬度髓绽。
嗯敛苇，這個(gè)想法不錯(cuò)，有點(diǎn)接近我心中的那個(gè)效果了顺呕。于是枫攀，我又折騰了一番：
這回終于有點(diǎn)樣子了，只不過還是每個(gè)li都有一個(gè)自己的滑動(dòng)條株茶，而領(lǐng)導(dǎo)的意思是導(dǎo)航欄頂部只有一條公用的4px的藍(lán)色滑動(dòng)條来涨，鼠標(biāo)移入時(shí)來回切換。
此時(shí)忌卤，已將近中午扫夜，我debug 的幕后過程其實(shí)更加艱辛，不像我現(xiàn)在寫文字時(shí)那么輕描淡寫驰徊。而我旁邊的同事說笤闯，看你折騰來折騰去的，干嘛那么辛苦棍厂，去網(wǎng)上找個(gè)插件就好了颗味，省時(shí)省力。
當(dāng)時(shí)牺弹，我只能苦笑浦马，因?yàn)榍靶┤兆游腋曨l里寫過這個(gè)例子时呀，不過時(shí)間隔的有點(diǎn)久，我自己想不起當(dāng)時(shí)的邏輯了晶默。
下午又研究了大半天谨娜，突然靈光一現(xiàn)，想到了一招磺陡，可以在ul的外層包一層div趴梢，和ul同級(jí)新增一個(gè)span元素，這個(gè)span就是那個(gè)公用的藍(lán)色滑動(dòng)條币他。然后給父元素設(shè)置為相對(duì)位置坞靶，給span設(shè)置為絕對(duì)位置。然后根據(jù)鼠標(biāo)移入的li的索引蝴悉，計(jì)算出span要滑動(dòng)的距離彰阴，這個(gè)距離就等于li的width乘以移入li的index的值，再加上每個(gè)li之間的間距拍冠。還是趕緊貼上html結(jié)構(gòu)：
中途因?yàn)閘i的index索引停滯了好一陣子尿这，因?yàn)閕ndex值取不到。于是倦微，我又用原生javascript寫了一遍妻味，還是取不到值，然后又改回來jquery的寫法欣福。在經(jīng)過多次翻閱jquery的api文檔责球，多次試錯(cuò)之后，終于效果寫出來了拓劝，以下是最終的業(yè)務(wù)代碼：
在這里雏逾，我先解釋下：
第一步，通過filter方法篩選出className為current的li郑临，獲得它的index栖博，然后賦值給變量currentNum；
第二步厢洞，在瀏覽器刷新時(shí)初始化滑動(dòng)條sliderBar的位置到指定的欄目上仇让；
第三步，利用hover方法監(jiān)控鼠標(biāo)移入移出的效果躺翻，從而改變sliderBar的left的值丧叽，達(dá)到滑動(dòng)的動(dòng)畫效果。其中公你，stop()方法是為了解決動(dòng)畫隊(duì)列的問題踊淳。
以上就是我debug的過程，雖然浪費(fèi)了一些時(shí)間陕靠，但是好歹問題解決了迂尝。如果你要問我脱茉，你哪來那么大的勇氣，去死磕這個(gè)效果(bug)垄开？我會(huì)告訴你琴许，如果擱以前，我可能會(huì)在網(wǎng)上找個(gè)插件了事溉躲，因?yàn)樵谡劦絡(luò)avascript業(yè)務(wù)邏輯開發(fā)這塊虚吟，我承認(rèn)還是有不小的差距。
但是签财，今年我開始認(rèn)真的研究了紅皮書，也就是《JavaScript高級(jí)程序設(shè)計(jì)》這本被奉為經(jīng)典的JS書籍偏塞。在經(jīng)過不斷的拜讀和敲代碼唱蒸，現(xiàn)在我對(duì)自己的原生JS這塊逐漸有了些許自信，明白了它的一些底層原理和概念設(shè)計(jì)灸叼。以前是只會(huì)照葫蘆畫瓢神汹，現(xiàn)在也有了點(diǎn)知其然，更知其所以然的味道古今。
正是通過對(duì)基礎(chǔ)的夯實(shí)屁魏，我才有了莫名的勇氣去死磕這些開發(fā)中遇到的各種疑難雜癥。
感謝老鐵們不厭其煩的看我debug思維重現(xiàn)到這里捉腥，其實(shí)氓拼，閏土也是想借著這個(gè)事兒想跟大家說，前端基礎(chǔ)真的很重要抵碟，尤其是JS桃漾！如果你基礎(chǔ)不牢靠，一味的追逐熱門框架拟逮，看似解決了工作上的一些問題撬统。但回頭想想，你的這種技術(shù)邏輯還沒有形成自己的知識(shí)體系敦迄，它是松散的恋追，是畸形的，是根基不牢靠的罚屋。學(xué)好基礎(chǔ)再去學(xué)框架苦囱，會(huì)事半功倍，游刃有余沿后。如果基礎(chǔ)沒打好沿彭，不注重底層原理，你的前端路注定走不遠(yuǎn)尖滚。
因?yàn)榻鉀Q一個(gè)bug喉刘，浪費(fèi)了一些時(shí)間瞧柔，看似得不償失，但是搞出來就算牛逼睦裳。最起碼等你以后當(dāng)老大了造锅，別人問你，你就知道怎么解決廉邑，自己踩過的坑哥蔚，印象最深。而不是說蛛蒙，以前有人幫我解決過糙箍，現(xiàn)在忘了。
所以說牵祟，實(shí)踐是檢驗(yàn)真理的唯一標(biāo)準(zhǔn)深夯。網(wǎng)上很多文章寫的有好有壞，自己去動(dòng)手debug或者是實(shí)踐一下诺苹，得出自己的結(jié)論才是靠譜的咕晋。
后記
凌晨1點(diǎn)，夜已深收奔，估計(jì)大家看到這篇文章的推送掌呜，已是明早上班趕路時(shí)。臨睡之前坪哄，閏土送大家一句話：別人也沒有多牛逼质蕉，你也可以在你的領(lǐng)域，開辟天地翩肌。
聲明
歡迎轉(zhuǎn)載饰剥，請(qǐng)注明出處和作者，同時(shí)保留聲明摧阅。
作者：閏土少年
出處：http://www.cnblogs.com/running-runtu/
本博客的文章如無特殊說明汰蓉，均為原創(chuàng)，轉(zhuǎn)載請(qǐng)注明出處棒卷。如未經(jīng)作者同意必須保留此段聲明顾孽，且在文章頁面明顯位置給出原文連接，否則保留追究法律責(zé)任的權(quán)利比规。
