日韩精品欧美激情国产一区_中文无码精品一区二区三区在线_岛国毛片AV在线无码不卡_亞洲歐美日韓精品在線_使劲操好爽好粗视频在线播放_日韩一区欧美二区_八戒八戒网影院在线观看神马_亚洲怡红院在线色网_av无码不卡亚洲电影_国产麻豆媒体MDX

導(dǎo)航下拉劃塊滑動(dòng)效果, 隨著鼠標(biāo)放到不同的導(dǎo)航, 下劃塊會(huì)跟著左右滑動(dòng)

HTML代碼如下:

<div id="nav">
            <ul>
                <li>
                    <a href="">財(cái)經(jīng)</a>
                </li> 
                <li>
                    <a href="">娛樂(lè)</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);
}