HTML导航条滑动效果-优快云博客

本文链接：https://blog.youkuaiyun.com/yyf0409/article/details/75647361

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>导航条滑动</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 1049px;
            margin: 20px auto;
            position: relative;
            background-color: #333131;
        }
        ul{
            overflow: hidden;
        }
        ul li{
            float:left;
            list-style: none;
            width: 130px;
            height: 40px;
            border-right: 1px solid white;
            text-align: center;
            line-height: 40px;
          font-size: 14px;
            color: white;
        }
        #nav-bar{
            width: 132px;
            height:5px;
            background-color: #ee372a;

            position: absolute;
            bottom: 0;
            left: 0;
        }

    </style>
</head>
<body>
<div class="box">
    <ul>
        <li>网站首页</li>
        <li>关于我们</li>
        <li>免费认证</li>
        <li>政府扶持</li>
        <li>知识产权</li>
        <li>上市服务</li>
        <li>人才招聘</li>
        <li>联系我们</li>
    </ul>
    <div id="nav-bar"></div>
<script>
    //导航条的切换就是下滑线的位置改变，
    //定义一个对象 获取id为"nav-bar"的标签
    var  navBar = document.getElementById("nav-bar")
    var lis = document.getElementsByTagName("li");
    var currentX = 0;
    var beginX = 0;

    //导航条改变位置的计算
    for(var i=0;i<lis.length;i++){
        lis[i].onmouseover = function(event){
            var e = window.event||event;
            currentX = this.offsetLeft;
            console.log(currentX);

        }
    }
//滑动的实质是将改变的过程放慢了

    setInterval(function(){
        //begin每次所处位置应该是每一份距离加上前面已经走了的距离
        beginX = beginX + (currentX-beginX)/10;
        //加上单位 20的意思就是隔20毫秒执行
        navBar.style.left = beginX +"px";
    },20);

</script>
</div>
</body>
</html>

导航栏切换导航条的移动