简单导航栏 demo

最新推荐文章于 2019-10-11 14:18:27 发布

涛痕

最新推荐文章于 2019-10-11 14:18:27 发布

阅读量1.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： demo 涛痕世界文章标签： html 导航源码前端实例

本文链接：https://blog.youkuaiyun.com/iamcgt/article/details/72877005

涛痕世界同时被 2 个专栏收录

56 篇文章

订阅专栏

demo

18 篇文章

订阅专栏

效果

这里写图片描述

思路

红条是绝对定位，根据鼠标移动改变自己的位置

源码

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航栏</title>
    <link href="css/index.css" type="text/css" rel="stylesheet">
    <script src="js/index.js"></script>
</head>
<body>
    <div id="frame">
        <ul>
            <li><span>网站首页</span></li>
            <li><span>|</span></li>
            <li><span>关于我们</span></li>
            <li><span>|</span></li>
            <li><span>资质认证</span></li>
            <li><span>|</span></li>
            <li><span>政府扶持</span></li>
            <li><span>|</span></li>
            <li><span>知识产权</span></li>
            <li><span>|</span></li>
            <li><span>上市服务</span></li>
            <li><span>|</span></li>
            <li><span>人才招聘</span></li>
            <li><span>|</span></li>
            <li><span>联系我们</span></li>
        </ul>
        <div id="active"></div>
    </div>
</body>
</html>

css

*{
    margin: 0;
    padding: 0;
}
#frame{
    margin-top: 100px;
    position: relative;
}
#active{
    position: absolute;
    width: 90px;
    height: 4px;
    background-color: #e74e3e;
    bottom: 0;
}
ul{
    padding: 0 30px;
    margin: 0 auto;
    width: 797px;
    list-style: none;
    overflow: hidden;
    background-color: #000;
    color: #fff;
    font-size: 14px;
    font-family: "黑体";
}

ul li{
    float: left;

}

ul li span{
    text-align: center;
    display: block;
    width: 90px;
    height: 38px;
    line-height: 38px;
}

ul li:nth-child(2n) span{
    font-size: 8px;
    width: 10px;
}

ul li:nth-child(2n+1){
    cursor: pointer;

}

JavaScript

/**
 * Created by cgt on 2017/4/9.
 */
window.onload=function(){
    var active = document.getElementById("active");
    var currentX;
    var div = document.getElementById("frame");
    var li = div.children[0].children[0].children[0];
    active.style.left=li.offsetLeft+"px";
    var beginX = li.offsetLeft;
    var lis = div.children[0].children;
    for(var i=0;i<lis.length;i++){
        if(i%2 !=0){
            continue;
        }
        lis[i].onmouseover = function(event){
            event = window.event||event;
            var src = event.srcElement;
            currentX = src.offsetLeft;
            setInterval(function(){
                beginX= beginX+(currentX-beginX)/10;
                active.style.left = beginX+"px";
            },25);
        }
    }
}