• <ol id="gebcs"></ol>
    <track id="gebcs"><i id="gebcs"></i></track>

    導航劃塊滑動效果

    時間:2021-06-07 17:06:04 類型:JS/JQUERY
    字號:    

    導航下拉劃塊滑動效果, 隨著鼠標放到不同的導航, 下劃塊會跟著左右滑動

    1.jpg

    HTML代碼如下:

    <div id="nav">
                <ul>
                    <li>
                        <a href="">財經</a>
                    </li> 
                    <li>
                        <a href="">娛樂</a>
                    </li>
                    <li>
                        <a href="">NBA</a>
                    </li>
                    <li>
                        <a href="">綜藝</a>
                    </li>
                    <span class="slider"></span>
                </ul>
            </div>

    jquery代碼如下:

    $(function(){
            $("#nav>ul>li").hover(
                function(){
                    let pos = $(this).position();
                        $(".slider").css({
                            'left' : pos.left + "px",
                        }).addClass("transform_slider");
                },
                function(event){
                    $(".slider").removeClass("transform_slider");
                }
            );
        })

    CSS樣式如下:

    *{
        padding: 0; margin:0;
    }
    ul,ol,li{
        list-style: none;
    }
    a{
        text-decoration: none;
    }
    body{
        font-size: 14px;
        font-family: '微軟雅黑';
    }
    #nav{
        height: 44px;
        background-color: #0A0E11;
    }
    #nav>ul{
        width:500px;
        margin:0 auto;
        position: relative;
        height: 44px;
    }
    #nav>ul>li{
        width: 52px;
        height: 44px; line-height: 44px;
        float: left;
    }
    #nav>ul>li>a{
        color: #fff;
        display: block;
        height: 44px;
        text-align: center;
    }
    
    .slider{
        position: absolute;
        top:44px;
        left:0;
        width: 52px;
        height: 5px;
        background-color: #5FB878;
        transition:all .2s;
        -webkit-transition:all .2s;
        transform:scale(0,1);
        -ms-transform:scale(0,1);
        -webkit-transform:scale(0,1);
    }
    .transform_slider{
        
        transform:scale(1,1);
        -ms-transform:scale(1,1);
        -webkit-transform:scale(1,1);
    }


    黄片基地 <