Js实现滑动的导航栏菜单

网页上的导航栏随处可见,我们可以给导航栏加上很多特效。下面是我经常用的一种效果,滑动的导航栏菜单。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>前端ABC-滑动的导航栏菜单</title>
    <style type="text/css">
        html,body,ul,li {
            padding: 0;
            margin: 0;
            font-size: 14px;
        }
        #nav {
            position: relative;
            width: 500px;
            height: 30px;
            list-style-type: none;
            background-color: #6fa8dc;
        }
        #nav li {
            float: left;
            width: 100px;
            height: 28px;
            line-height: 28px;
            text-align: center;
            cursor: pointer;
            z-index: 2;
        }
        ul#nav li a {
            text-decoration: none;
            color: #111;
            font-family: "Microsoft YaHei";
        }
        #nav li.bg {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100px;
            height: 5px;
            background-color: #073763;
            z-index: 1;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <ul id="nav">       
        <li>
            <a href="#">首&nbsp;&nbsp;页</a>
        </li>
        <li>
            <a href="#">联系方式</a>
        </li>
        <li>
            <a href="#">产品展示</a>
        </li>
        <li>
            <a href="#">成员介绍</a>
        </li>
        <li>
            <a href="#">发展前景</a>
        </li>
        <li></li>
    </ul>
    <script type="text/javascript">
        window.onload = function(){
            var oNav = document.getElementById('nav'),
                oLi = oNav.getElementsByTagName('li'),
                oBg = oNav.getElementsByClassName('bg'),
                oBg = oLi[oLi.length - 1],
                i = 0;
            for(i = 0; i < oLi.length - 1; i++){
                oLi[i].onmouseover = function(){
                    startMove(oBg,this.offsetLeft);
                };
                oLi[i].onmouseout = function(){
                    startMove(oBg,0);
                };
            }
        }
        var iSpeed = 0;
        var left = 0;
        function startMove(obj,iTarget){
            clearInterval(obj.timer);
            obj.timer = setInterval(function(){
                iSpeed += (iTarget-obj.offsetLeft)/6;
                iSpeed *= 0.4;
                left += iSpeed;
                if(Math.abs(iSpeed) < 1 && Math.abs(left - iTarget) < 1){
                    clearInterval(obj.timer);
                    obj.style.left = iTarget + 'px';
                } else {
                    obj.style.left = left + 'px';
                }
            },30)
        }
    </script>
</body>
</html>

欢迎分享本文,转载请保留出处:前端ABC » Js实现滑动的导航栏菜单

赞 (3)
分享到:更多 ()

发表评论 1

  1. 匿名已收藏,效果不错哦,是我想要的回复