原生JS实现特效导航条

发布于

分享一个用原生JS实现的特效导航条，效果如下：

实现代码如下：

代码语言：javascript
复制
<!DOCTYPE html>

<head>

<meta charset="utf-8" />

<title>原生JS实现特效导航条</title>

<style>

body {

margin: 0;

background: #66FF99;

}


    ul {
        padding-left: 0;
        margin: 0;
    }

    li {
        list-style: none;
    }

    #nav {
        height: 40px;
        background: #900;
        margin-top: 50px;
    }

    #nav ul {
        width: 800px;
        height: 40px;
        margin: 0 auto;
    }

    #nav li {
        float: left;
        height: 40px;
    }

    #nav a {
        float: left;
        position: relative;
        height: 40px;
        overflow: hidden;
        font-size: 14px;
        color: #e0e03a;
        text-decoration: none;
        cursor: pointer;
    }

    #nav strong {
        float: left;
    }

    #nav span {
        float: left;
        padding: 0 20px;
        height: 40px;
        line-height: 40px;
        background: #900;
        clear: both;
    }

    #nav .active,
    #nav .current span {
        background: #600;
        color: #fff;
    }

    #nav .current .active {
        color: #e0e03a;
    }
&lt;/style&gt;
&lt;script&gt;
    window.onload = function () {
        var oDiv = document.getElementById(&#39;nav&#39;);
        var aStrong = oDiv.getElementsByTagName(&#39;strong&#39;);
        var aA = oDiv.getElementsByTagName(&#39;a&#39;);
        var iTarget = oDiv.getElementsByTagName(&#39;li&#39;)[0].offsetHeight;

        for (var i = 0; i &lt; aStrong.length; i++) {
            aA[i].style.width = aStrong[i].style.width = aStrong[i].getElementsByTagName(&#39;span&#39;)[0].offsetWidth + &#39;px&#39;;
            aStrong[i].style.position = &#39;absolute&#39;;
            aStrong[i].style.top = aStrong[i].style.left = 0;

            aStrong[i].onmouseover = function () {
                startMove(this, -iTarget);
            };
            aStrong[i].onmouseout = function () {
                startMove(this, 0);
            };
        }
    };

    function startMove(obj, target) {
        clearInterval(obj.iTime);
        obj.iTime = setInterval(function () {
            if (obj.offsetTop == target) {
                clearInterval(obj.iTime);
            } else {
                var iSpeed = (target - obj.offsetTop) / 4;
                iSpeed = iSpeed &gt; 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
                obj.style.top = obj.offsetTop + iSpeed + &#39;px&#39;;
            }
        }, 30);
    }
&lt;/script&gt;



</head>


<body>

<div id="nav">

<ul>

<li class="current">

<a>

<strong>

<span>网站首页</span>

<span class="active">网站首页</span>

</strong>

</a>

</li>

<li>

<a>

<strong>

<span>服务案例</span>

<span class="active">服务案例</span>

</strong>

</a>

</li>

<li>

<a>

<strong>

<span>关于我们</span>

<span class="active">关于我们</span>

</strong>

</a>

</li>

<li>

<a>

<strong>

<span>企业文化</span>

<span class="active">企业文化</span>

</strong>

</a>

</li>

<li>

<a>

<strong>

<span>核心课程</span>

<span class="active">核心课程</span>

</strong>

</a>

</li>

<li>

<a>

<strong>

<span>联系我们</span>

<span class="active">联系我们</span>

</strong>

</a>

</li>

</ul>

</div>

</body>


</html>

#特效