简单导航栏 demo

来源：互联网发布：网络hk是什么意思呢编辑：程序博客网时间：2024/05/17 10:55

效果

这里写图片描述

思路

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

源码

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);        }    }}

阅读全文

1 0