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


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

    翠花,上效果图!

    实现代码如下(思路见代码):

    <!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>
  • 相关阅读:
    GIT使用方法
    结对-结对编项目贪吃蛇-设计文档
    结对-结对编项目贪吃蛇-开发环境搭建过程
    《团队-爬取豆瓣电影TOP250-需求分析》
    《团队-爬取豆瓣电影TOP250-成员简介及分工》
    结对-结对编项目贪吃蛇-需求分析
    20170906-构建之法:阅读问题
    20170906-构建之法:现代软件工程-阅读笔记
    团队名称:极限定理
    软件工程初识
  • 原文地址:https://www.cnblogs.com/zmeng/p/5175078.html
Copyright © 2020-2023  润新知