jquery 实现导航栏滑动效果

2016-10-20 11:37:00 3330 2 编辑:深色多郎 来源:网站设计书籍

精简的代码实现导航栏滑动效果,实现详解:

1.滑块位置:通过父节点position=fixed,子节点position=absolute方式,实现子节点浮动;

2.导航栏居中:通过left=0px,right=0px,margin-left=auto,margin-right=auto实现;

3.通过jQuery动态改变滑块的Left和Width,然后通过animate实现动画效果。


<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8"></meta>

    <title>滑动导航栏</title>

    <script scr=""></script><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

    <link rel="stylesheet" href="style.css" type="text/css" />

    <style type="text/css">

        body,div,p{

            margin:0; 

            padding:0;

        }

        .nav{

            background-color:black;

            position:fixed;

            left:0px;

            right:0px;

            width:80%;

            margin:10px auto;

            text-align:center;

            height:37px;

        }

        .nav a{

            padding:10px;

            color:white;

            line-height:30px;

            text-decoration:none;

            height:37px;

        }

        #navslip{

            height:2px;

            background-color:#8f919e; 

            position:absolute; 

            bottom:7px; 

            width:0px;

            left:0px;

            display:none;

            overflow:hidden;

        }

    </style>

</head>

<body>

    <div class="nav">

        <a href="http://baidu.com" target="_black" >百度</a>

        <a href="http://sina.com" target="_black" >新浪</a>

        <a href="http://58.com" target="_black" >58同城</a>

        <a href="http://sentsin.com/message/" target="_black" title="留言">致时光</a>

        <a href="http://sentsin.com/daohang/" target="_black">前端圈</a>

        <i id="navslip"></i>

    </div>

    <script>

        $(function (){

            setSlip();

        });

        var setSlip = function(){

            var slip = $('#navslip');

            var a = $('.nav a:first');

            //初始化滑块

            slip.css({

                'width':a.width()+10,

                'left' :parseInt(a.position().left) + 5 +'px'

            });

            $('.nav a').mouseenter(function(){

                //显示滑块

                if(slip.css('display') == 'none'){

                    slip.show();

                };

                //移动滑块

                slip.stop().animate({

                    width: $(this).width()+10,

                    left:  parseInt($(this).position().left) + 5 +'px'

                },300);

            });

        };

    </script>

</body>

</html>

本站文章均为深正网站建设摘自权威资料,书籍,或网络原创文章,如有版权纠纷或者违规问题,请即刻联系我们删除,我们欢迎您分享,引用和转载,但谢绝直接搬砖和抄袭!感谢...
关注深正互联

15

技术从业经验

多一份方案,会有收获...

联系深正互联,免费获得专属《策划方案》及报价

在线咨询
微信交谈
拒绝骚扰,我们只想为给您带来一些惊喜...
多一份免费策划方案,总有益处。

请直接添加技术总监微信联系咨询

深正互联微信
扫描即可沟通