原生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;
        }
    </style>
    <script>
        window.onload = function () {
            var oDiv = document.getElementById('nav');
            var aStrong = oDiv.getElementsByTagName('strong');
            var aA = oDiv.getElementsByTagName('a');
            var iTarget = oDiv.getElementsByTagName('li')[0].offsetHeight;

            for (var i = 0; i < aStrong.length; i  ) {
                aA[i].style.width = aStrong[i].style.width = aStrong[i].getElementsByTagName('span')[0].offsetWidth   'px';
                aStrong[i].style.position = 'absolute';
                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 > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
                    obj.style.top = obj.offsetTop   iSpeed   'px';
                }
            }, 30);
        }
    </script>
</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>
特效
0 人点赞