导航菜单底部滑动条跟随效果

时间：2016-02-01 15:33:17 阅读：245 评论：0 收藏：0 [点我收藏+]

网上昨天学了一个导航条效果今天手动实现了一下开心。。。

翠花，上效果图！

技术分享

实现代码如下（思路见代码）：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>navdemo1</title>
    <style>
        /*
           1.位置属性(position, top, right, z-index, display, float等) 
           2.大小(width, height, padding, margin) 
           3.文字系列(font, line-height, letter-spacing, color- text-align等) 
           4.背景(background, border等)
           5.其他(animation, transition等) 
            */
        * {
            padding: 0;
            margin: 0;
            font-family: ‘Microsoft YaHei‘;
        }
        a{text-decoration:none;}
        li{list-style:none;}

        .nav-wrap{position:relative;background-color:#000;}
        .nav-wrap .nav{width:1000px;margin:0 auto; overflow:hidden;}
        .nav-wrap .nav li{float:left;}
        .nav-wrap .nav li a{display:block; height:50px;padding:0 50px;line-height:50px;color:#fff;transition:background-color 0.3s linear;}
        .nav-wrap .nav li a:hover,.nav-wrap .nav li a.active{background-color:#484646;}
        .nav-wrap .line{display:block;position:absolute;bottom:0;width:50px;height:2px;background-color:#ff6a00;}
    </style>
    <script src="~/Scripts/jquery-1.8.2.js"></script>
    <script src="~/Scripts/jquery.easing.1.3.js"></script>
    <script>
        $(function () {
            navdeal();
        });
        //导航条效果处理
        //思路：
        //1.下滑条绝对定位到导航条模块的底部 
        //2.js控制下滑条 宽度=当前菜单项的宽度  左边距=当前菜单项相对父元素（.nav-wrap）的左偏移 
        //3.加上easing.js中的弹性效果
        var navdeal = function () {
            var $item_active = $(‘.nav-wrap .nav li a.active‘);
            var $nav_line = $(‘.nav-wrap .line‘);
            var item_width = $item_active.outerWidth();
            var item_position_left = $item_active.position().left;

            $nav_line.css({ ‘width‘: item_width, ‘margin-left‘: item_position_left });
            
            //菜单项鼠标移入，移出事件绑定
            $(‘.nav-wrap .nav li a‘).bind({
                mouseover: function () {
                    var item_width = $(this).outerWidth();
                    var item_position_left = $(this).position().left;

                    $nav_line.stop().animate({ ‘width‘: item_width, ‘margin-left‘: item_position_left }, 800, ‘easeOutBounce‘);
                },
                mouseout: function () {
                    $nav_line.stop().animate({ ‘width‘: item_width, ‘margin-left‘: item_position_left }, 800, ‘easeOutBounce‘);
                }
            });
        }
    </script>
</head>
<body>
    <div class="nav-wrap">
        <ul class="nav">
            <li><a href="#" class="active">首页</a></li>
            <li><a href="#">我的订单</a></li>
            <li><a href="#">我的购物车</a></li>
            <li><a href="#">退出</a></li>
        </ul>
        <span class="line"></span>
    </div>
</body>
</html>

导航菜单底部滑动条跟随效果

原文：http://www.cnblogs.com/zmeng/p/5175078.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)