手写jquery滑动导航，兼容IE7及以上+主流浏览器

今天抽点时间做了一个JQ的滑动导航，很多网站都会做滑动导航，这样的导航对于浏览者来说还是很有意思的。

这个滑动导航使用了CSS的定位（position）和jquery的动画（animate）来制作的，当然制作的过程中也充分考虑了兼容问题，IE7及以上没有问题，主流浏览器就更不会有问题了。

出来的界面如下图：

网站代码如下：

<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<div id="cgl_nav">
    <em></em>
    <ul id="cgl_nav_ul" class="clearfix">
        <li><a href="#">首页</a></li>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">技术分享</a></li>
        <li class="on"><a href="#">个人随笔</a></li>
        <li><a href="#">资源分享</a></li>
        <li><a href="#">留言互动</a></li>
        <li><a href="#">新闻资讯</a></li>
        <li><a href="#">关于CGLweb</a></li>
    </ul>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $cgl_navbox = $('#cgl_nav');
        $cgl_navbox_em = $('#cgl_nav em');
        $cgl_nav_ulli = $('#cgl_nav_ul li');
        $cgl_nav_ul = $('#cgl_nav_ul');
        var width_li = 100;
        //初始化
        var weizhi = $('#cgl_nav_ul li.on').index()*width_li;
        $cgl_navbox_em.css('left',weizhi+'px')
        //hover  em 滚动
        $cgl_nav_ulli.hover(function(){
            var index_em = $(this).index()*width_li;
            cgl_timer = setTimeout(function(){
                $cgl_navbox_em.stop(false,true).animate({'left':index_em+'px'},400)
            },150)
        },function(){
            clearTimeout(cgl_timer)
        });
        //位置归位
        $cgl_nav_ul.hover(function(){

        },function(){
            $cgl_navbox_em.stop(false,true).animate({'left':weizhi+'px'},400)
        });
    });
</script>
<style type="text/css">
    body,ul,li{margin:0; padding:0; outline:none;}
    a:focus{-moz-outline-style:none;}
    a:focus{outline:none;}
    ul,ol{list-style:none;}
    a{text-decoration:none;}
    .clearfix:after{content:"."; display:block; height:0; clear:both; visibility:hidden;}
    .clearfix{display:inline-block; display:block; zoom:1;}
    /*#A35015   #9E1E18*/

    #cgl_nav{ width:800px; margin:0 auto; background:#A35015; position:relative; z-index:5;}
    #cgl_nav ul{ text-align:center; position:relative; z-index:4;}
    #cgl_nav li{ float:left;  font-size:12px;}
    #cgl_nav li a{ color:#fff;}
    #cgl_nav em,#cgl_nav li,#cgl_nav li a{ display:block; width:100px; height:36px; line-height:36px;}
    #cgl_nav em{ position:absolute; top:0; left:0; background:#9E1E18; z-index:2;}
</style>

运行

视频地址：点击进入

百度网盘下载：

链接：https://pan.baidu.com/s/1jHOErFC

密码：dq1n