导航划块滑动效果

时间：2021-06-07 17:06:04 类型：JS/JQUERY
字号： 小  中  大

导航下拉划块滑动效果, 随着鼠标放到不同的导航, 下划块会跟着左右滑动

1.jpg

HTML代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
$(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样式如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
*{
    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);
}


<