导航栏动画特效（dom实现）

亦凉 2022-05-09 03:12 263阅读 0赞

*  想用纯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的动画会更简单一些