jquery 实现导航栏滑动效果

最新推荐文章于 2023-07-02 21:55:07 发布

joyhen

最新推荐文章于 2023-07-02 21:55:07 发布

阅读量3.4w

点赞数 2

分类专栏： Javascript 文章标签： jquery

Javascript 专栏收录该内容

65 篇文章 1 订阅

订阅专栏

原文：http://www.cnblogs.com/WebMobile/p/3926921.html

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

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>

joyhen

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
jquery 实现导航栏滑动效果

原文：http://www.cnblogs.com/WebMobile/p/3926921.html精简的代码实现导航栏滑动效果，实现详解：1.滑块位置：通过父节点position=fixed，子节点position=absolute方式，实现子节点浮动；2.导航栏居中：通过left=0px，right=0px，margin-left=auto，margin-right
复制链接

扫一扫