百度导航条的写法jQuery

最新推荐文章于 2022-04-10 17:04:34 发布

哎呦灬不错呦。

最新推荐文章于 2022-04-10 17:04:34 发布

阅读量632

点赞数 1

分类专栏： JavaScript 文章标签：百度 jquery

本文链接：https://blog.youkuaiyun.com/weixin_52583582/article/details/112600033

版权

JavaScript 专栏收录该内容

11 篇文章

订阅专栏

该博客主要围绕百度导航条的写法展开，运用jQuery技术来实现。jQuery是前端开发中常用的库，能帮助开发者更便捷地操作DOM元素，实现导航条的各种交互效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .box {
            width: 100%;
            height: 40px;
            background: #01204f;
            margin-top: 50px;
        }

        .box ul {
            width: 1000px;
            height: 40px;
            margin: 0 auto;
            position: relative;
            cursor: pointer;
        }

        .box li {
            float: left;
            color: #fff;
            padding: 0 10px;
            font: bold 14px/40px "Microsoft YaHei";
            position: relative;  /* 提升层级，不会改变元素特性 */
        }
        .box .active{
            background: #cc0000;
        }
        .move{
            width: 40px;
            height: 40px;
            background: #cc0000;
            position: absolute;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <div class="move"></div> <!-- 移动盒子 -->
            <li class="active">首页</li>
            <li>国内</li>
            <li>国际</li>
            <li>军事</li>
            <li>军事</li>
            <li>军事</li>
            <li>财经</li>
            <li>体育</li>
            <li>物联网</li>
            <li>科技</li>
            <li>有效起床</li>
            <li>女人</li>
        </ul>
    </div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <script>
        $("li").hover(function(){
            //鼠标移入：鼠标到那个li，div就需要运动到那个li
            $(".move").stop().animate({"left":$(this).position().left,"width":$(this).innerWidth()});
        },function(){
            $(".move").stop().animate({"left":$(".active").position().left,"width":40})
        });


        $("li").click(function(){
            $(this).addClass("active").siblings("li").removeClass("active");
        })
    </script>
</body>

</html>