导航栏动画特效（dom实现）_深圳湾实验室导航栏动画如何实现的-CSDN博客

本文链接：https://blog.csdn.net/qq_41335337/article/details/82905061

想用纯dom搞一个简单的导航栏特效，本以为一个小时就能搞好，哎对dom理解不够深，一直搞了一下午。。。。。。
html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>网页定位导航</title>
    <link rel="stylesheet" type="text/css" href="nav.css">
</head>
<body>
<div id="main">
    <div id="animation"></div>
    <ul id="nav">
        <li><a href="#">腾讯新闻</a></li>
        <li><a href="#">百度新闻</a></li>
        <li><a href="#">搜狐新闻</a></li>
        <li><a href="#">谷歌新闻</a></li>
        <li><a href="#">cctv新闻</a></li>
    </ul>
    <div id="clear"></div>
</div>
<script src="nav.js"></script>
</body>
</html>

css

*{
    margin: 0;
    padding: 0;
}
#main{
    width: 510px;
    position: relative;
    margin-left: auto;
    margin-top: 30px;
    margin-right: auto;
}
#nav{
    list-style: none;
    line-height: 0;
    height: 40px;
    width:510px;
    font-size: 0;
}
#clear{
    clear: both;
}
#nav li{
    font-size: 0;
    line-height: 0;
    display: inline;

    float: left;
}
#nav a{
    display: block;
    font-size: 20px;
    line-height: 30px;
    width: 80px;
    text-decoration: none;
    padding: 5px 10px;
    border-radius:10px ;
    color:black;
}
#animation{
    position: absolute;
    height: 40px;
    width: 100px;
    border-radius:10px ;
    top: 0px;
    z-index: -1;
    background-color: pink;
}

javascript

addLoadEvent(movePrepare);
function addLoadEvent(func) {
    var oldonload=window.onload;
    if(typeof window.onload!="function")
    {
        window.onload=func;
    }
    else{
        window.onload=function () {
            oldonload();
            func();
        }
    }
}
function movePrepare() {
    var navList=document.getElementById("nav");
    var aList=navList.getElementsByTagName("a");
    var elem=document.getElementById("animation");
    var maun=document.getElementById("main");
    console.log("赵向阳");
    elem.style.left="0px";
    elem.style.distances=0;
    /*添加鼠标点击事件*/
    aList[0].onclick=function () {
        move("animation",0, 10);
        elem.style.distances=0;
    }
    aList[1].onclick=function () {
        move("animation",100, 10);
        elem.style.distances=100;
    }
    aList[2].onclick=function () {
        move("animation",200, 10);
        elem.style.distances=200;
    }
    aList[3].onclick=function () {
        move("animation",300, 10);
        elem.style.distances=300;
    }
    aList[4].onclick=function () {
        move("animation",400, 10);
        elem.style.distances=400;
    }
    /*添加鼠标悬浮事件*/
    aList[0].onmouseover=function () {
        move("animation",0, 10);
    }
    aList[1].onmouseover=function () {
        move("animation", 100, 10);
    }
    aList[2].onmouseover=function () {
        move("animation", 200, 10);
    }
    aList[3].onmouseover=function () {
        move("animation", 300, 10);
    }
    aList[4].onmouseover=function () {
        move("animation", 400, 10);
    }
    /*添加鼠标移出事件*/
    maun.onmouseout=function (ev) {
        move("animation", elem.style.distances, 10)
   }
}
/*移动函数*/
function move(id,aleft,time) {
    var elem=document.getElementById(id);
    if(elem.style.movement)
    {
        clearTimeout(elem.style.movement);
    }
    var a_left=parseInt(window.getComputedStyle(elem,null)["left"]);
    if(aleft==a_left)
    {
        return true;
    }
    if(a_left>aleft)
    {
        var  sade=Math.ceil((a_left-aleft)/10);
        a_left=a_left-sade;
    }
    if(a_left<aleft)
    {
        var sade=Math.ceil((aleft-a_left)/10);
        a_left=a_left+sade;
    }
    elem.style.left=a_left+"px";
    elem.style.movement=setTimeout("move('"+id+"',"+aleft+","+time+")",time);
}

纯为练手，如想实现同样效果，用javascript的动画会更简单一些