成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

一個JS效果竟然要研究一天，我是不是不適合做前端？

ztyzz / 1007人閱讀

摘要：緊接著就是導(dǎo)航欄的特效編寫，殊不知，就是這個效果，讓原本計劃上午完成的事情，愣是被我研究了大半天才解決。剛開始我的布局是，導(dǎo)航欄是一個，下面有八個，分別是八個欄目。

前言

今天這篇文章的標(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 的特效編寫，殊不知，就是這個效果，讓原本計劃上午完成的事情，愣是被我研究了大半天才解決。二話不說，直接上圖：

我先給大家說下這里要實(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)時，我只能苦笑，因為前些日子我跟著視頻里寫過這個例子，不過時間隔的有點(diǎn)久，我自己想不起當(dāng)時的邏輯了。

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

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

在這里，我先解釋下：

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


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


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

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

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

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

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

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

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

后記

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

想了解我的更多動態(tài)？歡迎關(guān)注我的微信公眾號：閏土哥的前端路

作者：閏土少年
鏈接：https://segmentfault.com/a/11...
來源：segmentfault
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/89901.html

相關(guān)文章

  • 面試愛奇藝，竟然掛在第5輪……

    摘要：二面休息過后，就來了第二位面試官，面我運(yùn)維的，運(yùn)開嘛，如果沒有運(yùn)維知識肯定是不行的。后來的對話中，面試官也表示，可能之前做的更多的是的工作，對于容器這塊不熟悉關(guān)系也不是很大。整個三面大概也持續(xù)了要有不到一個小時。 今天給大家分享我曾經(jīng)在愛奇藝的面試，過程還是比較有意思的，可以給大家一些參考 聊騷階段 嗲妹妹：你好，我是愛奇藝的HR，我們正在招聘運(yùn)維開發(fā)崗位，請問您最近有在看工作機(jī)會嗎...

    Magicer 評論0 收藏0

  • 一個前端菜鳥的成長歷程

    摘要：張鑫旭老師的文章寫的很棒，解決了我的許多困惑。所以，基礎(chǔ)知識的牢固就顯得尤為重要是個不怎么聽話的孩子，總是會搞出一些奇奇怪怪的事情來張鑫旭老師十年磨一劍，鉆研的魔法，可見其中技術(shù)細(xì)節(jié)有多復(fù)雜。 ??從實(shí)習(xí)算起，到現(xiàn)在工作了也有一年半的時間了，在這期間，深深感受到了前端領(lǐng)域的飛速發(fā)展，在這里記錄一下自己的成長歷程，算是對知識的一個梳理，也希望幫助到剛?cè)胄械耐瑢W(xué)們。說來慚愧，大學(xué)里并沒有涉...

    lieeps 評論0 收藏0

  • 一個前端菜鳥的成長歷程

    摘要：張鑫旭老師的文章寫的很棒，解決了我的許多困惑。所以，基礎(chǔ)知識的牢固就顯得尤為重要是個不怎么聽話的孩子，總是會搞出一些奇奇怪怪的事情來張鑫旭老師十年磨一劍，鉆研的魔法，可見其中技術(shù)細(xì)節(jié)有多復(fù)雜。 ??從實(shí)習(xí)算起，到現(xiàn)在工作了也有一年半的時間了，在這期間，深深感受到了前端領(lǐng)域的飛速發(fā)展，在這里記錄一下自己的成長歷程，算是對知識的一個梳理，也希望幫助到剛?cè)胄械耐瑢W(xué)們。說來慚愧，大學(xué)里并沒有涉...

    SHERlocked93 評論0 收藏0

  • 26天學(xué)通前端開發(fā)（配資料）

    摘要：網(wǎng)上有很多前端的學(xué)習(xí)路徑文章，大多是知識點(diǎn)羅列為主或是資料的匯總，數(shù)據(jù)量讓新人望而卻步。天了解一個前端框架。也可以關(guān)注微信公眾號曉舟報告，發(fā)送獲取資料，就能收到下載密碼，網(wǎng)盤地址在最下方，獲取教程和案例的資料。 前言 好的學(xué)習(xí)方法可以事半功倍，好的學(xué)習(xí)路徑可以指明前進(jìn)方向。這篇文章不僅要寫學(xué)習(xí)路徑，還要寫學(xué)習(xí)方法，還要發(fā)資料，干貨滿滿，準(zhǔn)備接招。 網(wǎng)上有很多前端的學(xué)習(xí)路徑文章，大多是知...

    blair 評論0 收藏0

  • 如何學(xué)JavaScript

    摘要：書籍如下面向?qū)ο缶幊讨改?，風(fēng)格輕松易懂，比較適合初學(xué)者，原型那塊兒講得透徹，種繼承方式呢。還有另一件事情是，比如發(fā)現(xiàn)自己某個知識點(diǎn)不太清楚，可以單獨(dú)去百度。 作者：小不了鏈接：https://zhuanlan.zhihu.com/p/...來源：知乎著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。 鑒于時不時，有同學(xué)私信問我（老姚，下同）怎么學(xué)前端的問題。這里統(tǒng)一回...

    light 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<