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

浏览: 939次 日期:2017年12月28日 21:44:40 作者:青格勒

今天抽点时间做了一个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

 

文章链接:http://cenggel.com/js/30.html

版权声明:文章《手写jquery滑动导航,兼容IE7及以上+主流浏览器》由青格勒编写,转载请带上文章链接。

本章内容纯属乱讲,如有雷同,纯属巧合。如有借鉴之处已表明出处。

点击任意位置关闭窗口,感谢您的支持。


打赏规则 - 为了避免对于打赏模式产生误解,说明一下几点内容:

  • 1.打赏纯粹自愿,金额不限,别太多,1块就行;
  • 2.打赏不能作为解答疑问的理由;
  • 3.打赏不能帮你做毕业设计或论文;
  • 4.打赏不能帮你做工作中的项目;
  • 5.打赏就是这不能那不能,只是单纯打赏而已。
  • 5.最后谢谢支持。
关闭
相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注