登录  /  注册
博主信息
博文 44
粉丝 0
评论 0
访问量 34204
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
JQuery导航栏效果动画练习-2019年1月24日
的博客
原创
413人浏览过

实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>案例练习</title>
    <link rel="icon" type="image/x-icon" href="2.png">
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul li {
            float: left;
            width: 100px;
            line-height: 40px;
            text-align: center;
            font-weight: bold;
        }

        .box1 {
            width: 100%;
            height: 70px;
            background-color: #f5f5f5;
            box-shadow: 1px 1px 10px rgb(240, 0, 80);
            line-height: 70px;
            position: relative;
            top: -65px;
        }

        .box1 form {
            width: 800px;
            margin: 0 auto;
            position: relative;
        }

        .box1 input {
            width: 700px;
            height: 35px;
            padding-left: 20px;
            border: none;
            border-radius: 20px;
        }

        .box1 i {
            position: absolute;
            font-size: 20px;
            right: 100px;
        }

        .box1 span {
            position: absolute;
            display: block;
            width: 48px;
            height: 48px;
            background: url(show.jpg) -64px 168px;
            right: 0;
            margin-top: 5px;
        }

        .box2,
        .box3,
        .box4 {
            width: 1000px;
            height: 40px;
            line-height: 40px;
            margin: 50px auto;
            background: #f5f5f5;
        }

        .box2 li:hover a {
            color: #f5f5f5;
        }

        .box4 li {
            position: relative;
        }

        .box4 li i {
            margin-left: 10px;
        }

        .box4 li ul {
            box-shadow: 1px 1px 10px rgb(223, 223, 223);
            position: absolute;
            display: none;
        }

        .box4 li ul li:hover {
            background: #f5f5f5;
        }
    </style>
</head>

<body>
    <div class="box1">
        <form class="">
            <input type="text" name="" id="" placeholder="# 请输入内容 #">
            <i class="layui-icon"></i>
        </form>
        <span></span>
    </div>
    <div class="box2">
        <ul class="menu">
            <li><a href="">要闻</a></li>
            <li><a href="">国际</a></li>
            <li><a href="">国内</a></li>
            <li><a href="">社会</a></li>
            <li><a href="">军事</a></li>
            <li><a href="">娱乐</a></li>
            <li><a href="">体育</a></li>
            <li><a href="">汽车</a></li>
            <li><a href="">科技</a></li>
            <li><a href="">其他</a></li>
        </ul>
    </div>
    <div class="box3" style="position: relative;">
        <ul class="menu">
            <li><a href="">要闻</a></li>
            <li><a href="">国际</a></li>
            <li><a href="">国内</a></li>
            <li><a href="">社会</a></li>
            <li><a href="">军事</a></li>
            <li><a href="">娱乐</a></li>
            <li><a href="">体育</a></li>
            <li><a href="">汽车</a></li>
            <li><a href="">科技</a></li>
            <li><a href="">其他</a></li>
        </ul>
        <div class="box3_bottom" style="position: relative;width: 100px;height:3px;background: #ff6500;top: 37px;left: 100px;"></div>
    </div>
    <div class="box4">
        <ul class="menu">
            <li><a href="">要闻</a></li>
            <li><a href="">国际</a></li>
            <li><a href="">国内</a></li>
            <li><a href="">社会</a></li>
            <li><a href="">军事</a></li>
            <li><a href="">娱乐</a></li>
            <li><a href="">体育</a></li>
            <li><a href="">汽车</a></li>
            <li><a href="">科技</a></li>
            <li><a href="">其他</a><i class="layui-icon layui-icon-up"></i>
                <ul style="">
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                </ul>
            </li>
        </ul>
    </div>

    <script>
        $(document).ready(function () {

            $(".box1").hover(function () {
                // over
                $(this).stop().animate({
                    "top": 0
                }, 500);
            }, function () {
                // out
                $(this).stop().animate({
                    "top": "-65px"
                }, 500);
            });

            $(".box1 input").focus(function (e) {
                // e.preventDefault();
                $(this).css("box-shadow", "0px 0px 10px rgba(240, 0, 80, 0.555) inset");
            });

            $(".box1 input").blur(function (e) {
                e.preventDefault();
                $(this).css("box-shadow", "none");
            });

            $(".box2 li").hover(function () {
                // over
                $(this).css({
                    "background": "#ff6500"
                });

            }, function () {
                // out
                $(this).css({
                    "background": "none"
                });
            });

            $(".box3 li").hover(function () {
                // over
                let index = parseInt($(".box3 li").index($(this))) * 100;
                console.log(index);
                $(".box3>.box3_bottom").stop().animate({
                    "left": index + "px"
                }, 500);
            }, function () {
                // out
                $(".box3>.box3_bottom").stop().animate({
                    "left": "0px"
                }, 500);
            });

            $(".box4 li").hover(function () {
                // over
                $(this).find('i').attr('class', "layui-icon layui-icon-down")
                $(this).find('ul').slideDown(300)
            }, function () {
                // out
                $(this).find('i').attr('class', "layui-icon layui-icon-up")
                $(this).find('ul').slideUp()
            });
        });
    </script>
</body>

</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


批改状态:合格

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学