快捷導(dǎo)航

JS實(shí)現(xiàn)百度新聞導(dǎo)航欄效果

更新時(shí)間：2021年10月26日 10:25:53 作者：只想過(guò)平靜生活的普通上班族

這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)百度新聞導(dǎo)航欄效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了JS實(shí)現(xiàn)百度新聞導(dǎo)航欄效果的具體代碼，供大家參考，具體內(nèi)容如下

最近在學(xué)Web前端，用js簡(jiǎn)單實(shí)現(xiàn)了百度新聞導(dǎo)航欄的效果。當(dāng)鼠標(biāo)移動(dòng)到某一選項(xiàng)上方時(shí)，會(huì)有一個(gè)紅色背景塊滑動(dòng)到當(dāng)前選項(xiàng)上。當(dāng)點(diǎn)擊某一選項(xiàng)后，固定的紅色背景塊位置會(huì)移動(dòng)到當(dāng)前選項(xiàng)，意為當(dāng)前選項(xiàng)被選中。話不多說(shuō)，代碼如下

body部分

<div class="box">
        <!--兩個(gè)紅色背景塊-->
        <!--隨鼠標(biāo)移動(dòng)的背景塊-->
        <div id="move"></div>
        <!--鼠標(biāo)點(diǎn)擊后固定在某處的背景塊-->
        <div id="fixed"></div>
        <a href="#">主頁(yè)</a>
        <a href="#">國(guó)內(nèi)</a>
        <a href="#">國(guó)際</a>
        <a href="#">軍事</a>
        <a href="#">財(cái)經(jīng)</a>
        <a href="#">娛樂(lè)</a>
        <a href="#">體育</a>
        <a href="#">互聯(lián)網(wǎng)</a>
        <a href="#">科技</a>
        <a href="#">游戲</a>
        <a href="#">女人</a>
        <a href="#">汽車</a>
        <a href="#">房產(chǎn)</a>
</div>

css部分

 *{
            margin: 0;
            padding: 0;
        }
        .box{
            top:100px;
            width: 790px;
            height: 30px;
            font-size: 0;
            position: relative;
            margin: 0 auto;
            background-color: #01204f;
        }
        a{
            display: inline-block;
            position: relative;
            width: 60px;
            height: 30px;
            line-height: 30px;
            color: white;
            font-size: 16px;
            text-decoration: none;
            text-align: center;
            transition: all 0.6s;
        }
        #move{
            position: absolute;
            background-color: red;
            top: 0px;
            left: 0px;
            width: 60px;
            height: 30px;
            transition: all 0.6s;
        }
        #fixed{
            position: absolute;
            background-color: red;
            top: 0px;
            left: 0px;
            width: 60px;
            height: 30px;
        }

js部分

window.onload = function () {
      let move = document.getElementById("move");//滑動(dòng)的背景塊
      let fixed = document.getElementById("fixed");//固定在某處的背景塊
      let aList = document.getElementsByTagName("a");//a標(biāo)簽列表
      let left = move.offsetLeft + "px";//滑動(dòng)背景塊的初始位置
      //使所有a標(biāo)簽綁定移入、移出、單擊事件
      for (let i = 0; i < aList.length; i++) {
                aList[i].onmouseover = function () {
                    // 鼠標(biāo)移入某個(gè)a標(biāo)簽時(shí)，滑動(dòng)背景塊滑到當(dāng)前a標(biāo)簽的位置
                    move.style.left = aList[i].offsetLeft + "px";
                }
                aList[i].onmouseout = function () {
                    // 鼠標(biāo)移出a標(biāo)簽時(shí)，滑動(dòng)背景塊返回初始位置
                    move.style.left = left;
                }
                aList[i].onclick = function () {
                    // 某個(gè)a標(biāo)簽被點(diǎn)擊后，固定背景塊移動(dòng)到當(dāng)前a標(biāo)簽的位置
                    fixed.style.left = aList[i].offsetLeft + "px";
                    // 將滑動(dòng)背景塊的初始位置更新為當(dāng)前a標(biāo)簽的位置
                    left = aList[i].offsetLeft + "px";
                }
            }
        }

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: