很喜欢这个效果，可以经常练习，这个效果的难点在于一个缓动运动，以及蓝条跟随鼠标移动

<div class="nav-box" id="nav-box">
            <a href="#" class="nav-item">Griffin</a>
            <a href="#" class="nav-item">Paul</a>
            <a href="#" class="nav-item">Tomas</a>
            <a href="#" class="nav-item">Holiday</a>
            <a href="#" class="nav-item">Curry</a>
            <span class="line" id="line"></span>
</div>

用一个盒子，里面是五个a标签，因此要给a标签display:block

html,body{
        margin: 0;
        padding: 0;
            }
.nav-box{
        width: 800px;
        height: 56px;
        background-color: #BAB5B9;
        position: relative;
        margin: 100px auto;
            }
.nav-item{
        width:150px;
        height:56px;
        line-height: 56px;
        background-color: indianred;
        text-align: center;
        display: block;
        float: left;
        border-right: 1px solid #BAB5B9;
        color: #fff;
        font-size: 20px;
        font-family: "微软雅黑";
        text-decoration: none;
            }
.line{
        width: 150px;
        position: absolute;
        height: 5px;
        background-color: dodgerblue;
        left: 0;
        bottom: -5px;
            }

span做的蓝条要相对盒子进行绝对定位，来调整位置

js部分

1.要注意用getElementsByClassName获取到的是一个html集合，在循环中操作要带上索引
2.先验证有不有定时器的存在
3.运动部分封装在函数里

<script>
            var getitem = document.getElementsByClassName('nav-item');
            //var getitem = document.getElementById("nav-box").getElementsByTagName("a");
            var getline = document.getElementById("line");
            //alert(getline.nodeName); 打印出来的标签名是大写
            //alert(getitem[0].nodeName);
            var timer = null;
            getline.style.left =0;    //不进行赋空没效果？
            for (var i = 0;i < getitem.length;i++) {
                getitem[i].onmouseenter = function(){
                    if(timer){
                        clearTimeout(timer);
                    } //清除已存在的定时器
                    var start = parseInt(getline.style.left);
                    var end = this.offsetLeft;  //元素的边框的外边缘距离与已定位的父容器（offsetparent）的左边距离
                    move(start,end);
                }
            }
            function move(startpos,endpos){
                var step = (endpos - startpos)/10;
                if(step > 0){
                    step = Math.ceil(step);
                }else{
                    step = Math.floor(step);
                }
                startpos = startpos + step;
                getline.style.left = startpos + "px";
                if(startpos == endpos){
                    clearTimeout(timer);
                }else{
                    timer = setTimeout(function(){
                        move(startpos,endpos);
                    },16);
                }
            }
        </script>

捕风格化获.PNG

navbar.gif

文章内容来源于码匠