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


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

    翠花,上效果图!

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

    <!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>
  • 相关阅读:
    python3 初识GUI
    UI自动化测试底层原理
    Oracle导入数据无法导出空表的问题
    Oracle导入大数据量(百万以上)dmp文件,报错ora-12592 :包错误
    selenium 不同版本Driver
    selenium3 调用IE Unable to get browser
    记录错误,服务器上运行自动化脚本找不到窗口。
    python3 实现对代码文件中注释的翻译
    python3 通过邮件发送测试报告
    es6数值类型
  • 原文地址:https://www.cnblogs.com/zmeng/p/5175078.html
Copyright © 2020-2023  润新知