CSS3 + JS 導(dǎo)航欄鼠標(biāo)跟隨效果

最近做一個(gè)導(dǎo)航欄跟隨效果的頁(yè)面伞插,于是寫了個(gè)插件分享一下。
example.gif

CSS 設(shè)置

.nav {
    position: absolute;
    top: 30px;
    right: 100px;
    display: inline-block;
    margin: 20px auto;
}
.nav li {
    display: inline-block;
    margin-right: 20px;
}
.nav li a {
    text-decoration: none;
    color: #333;
}
.underline {
    position: absolute;
    top: 30px;
    left: 0;
    width: 32px;
    height: 2px;
    background: #333;
    -webkit-transition: all .5s;
       -moz-transition: all .5s;
        -ms-transition: all .5s;
         -o-transition: all .5s;
            transition: all .5s;
}

HTML 結(jié)構(gòu)

<ul class="nav">
    <li><a href="javascript:;">首頁(yè)</a></li>
    <li><a href="javascript:;">產(chǎn)品中心</a></li>
    <li><a href="javascript:;">關(guān)于我們</a></li>
    <li><a href="javascript:;">聯(lián)系我們</a></li>
    <li class="underline"></li>
</ul>

Native 原生寫法

// Native
(function () {
    var nav = document.querySelector('.nav'),
        underline = nav.querySelector('.underline');

    nav.addEventListener('mouseover', function (event) {
        var _target = event.target;
        if (_target.nodeName == "LI" || _target.nodeName == "A") {
            underline.style.left = _target.offsetLeft + 'px';
            underline.style.width = _target.offsetWidth + 'px';
        }
    }, false);
})();

jQuery 寫法

// jQuery
(function ($) {
    var $nav = $('.nav'),
        $underline = $nav.find('.underline');

    $nav.on('mouseover', 'li', function() {
        var _navOffsetLeft = $nav.offset().left,
            _targetOffsetLeft = $(this).offset().left,
            _targetWidth = $(this).width();

        $underline.css({
            'left': _targetOffsetLeft - _navOffsetLeft + 'px',
            'width': _targetWidth + 'px'
        });
    });
})(jQuery);

另外我編寫了插件放在Github上面(nav-nuderline.js)祷杈, https://github.com/wwlsky/nav-nuderline/

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市坝撑,隨后出現(xiàn)的幾起案子蜻底,更是在濱河造成了極大的恐慌,老刑警劉巖拔稳,帶你破解...
    沈念sama閱讀 222,681評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異锹雏,居然都是意外死亡巴比,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門礁遵,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)轻绞,“玉大人,你說(shuō)我怎么就攤上這事佣耐≌” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,421評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵兼砖,是天一觀的道長(zhǎng)奸远。 經(jīng)常有香客問(wèn)我既棺,道長(zhǎng),這世上最難降的妖魔是什么懒叛? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,114評(píng)論 1 300
  • 正文 為了忘掉前任丸冕,我火速辦了婚禮,結(jié)果婚禮上薛窥,老公的妹妹穿的比我還像新娘胖烛。我一直安慰自己,他們只是感情好诅迷,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布佩番。 她就那樣靜靜地躺著,像睡著了一般罢杉。 火紅的嫁衣襯著肌膚如雪趟畏。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 52,713評(píng)論 1 312
  • 那天屑那,我揣著相機(jī)與錄音拱镐,去河邊找鬼。 笑死持际,一個(gè)胖子當(dāng)著我的面吹牛沃琅,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播蜘欲,決...
    沈念sama閱讀 41,170評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼益眉,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了姥份?” 一聲冷哼從身側(cè)響起郭脂,我...
    開(kāi)封第一講書(shū)人閱讀 40,116評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎澈歉,沒(méi)想到半個(gè)月后展鸡,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,651評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡埃难,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評(píng)論 3 342
  • 正文 我和宋清朗相戀三年莹弊,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片涡尘。...
    茶點(diǎn)故事閱讀 40,865評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡忍弛,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出考抄,到底是詐尸還是另有隱情细疚,我是刑警寧澤,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布川梅,位于F島的核電站疯兼,受9級(jí)特大地震影響然遏,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜镇防,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評(píng)論 3 336
  • 文/蒙蒙 一肩狂、第九天 我趴在偏房一處隱蔽的房頂上張望侨歉。 院中可真熱鬧,春花似錦、人聲如沸毒姨。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,699評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)屁柏。三九已至,卻和暖如春扑毡,著一層夾襖步出監(jiān)牢的瞬間胃榕,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,814評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工瞄摊, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留勋又,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,299評(píng)論 3 379
  • 正文 我出身青樓换帜,卻偏偏與公主長(zhǎng)得像楔壤,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子惯驼,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • 用到的組件 1蹲嚣、通過(guò)CocoaPods安裝 2、第三方類庫(kù)安裝 3祟牲、第三方服務(wù) 友盟社會(huì)化分享組件 友盟用戶反饋 ...
    SunnyLeong閱讀 14,627評(píng)論 1 180
  • 如果所有人都如出一轍 隙畜,那是不是說(shuō),已經(jīng)沒(méi)有存在的必要了说贝。
    模擬器閱讀 171評(píng)論 0 0
  • 電影《七月與安生》: 七月與安生本來(lái)就不是一路人乡恕,她們就是兩個(gè)世界的人言询。無(wú)論從家庭環(huán)境、性格几颜、人生追求,怎么看也看...
    天行踐閱讀 1,300評(píng)論 4 2
  • 你偶爾從我夢(mèng)中來(lái) 讓我跟你聊著一時(shí) 平凡家話 或是生活里的小插曲 喜悅舒心的感覺(jué) 像是我每次路過(guò)油菜花田 那晌午妖...
    Life零絮閱讀 128評(píng)論 0 0