jquery 實現導航欄滑動效果

2016-10-20 1470 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>

本站文章均為深正網站建設摘自權威資料,書籍,或網絡原創文章,如有版權糾紛或者違規問題,請即刻聯系我們刪除,我們歡迎您分享,引用和轉載,但謝絕直接搬磚和抄襲!感謝...
關注深正互聯
七星彩头尾