bilibili导航滑动案例

1 month ago · 605e977bcb
parent ba5264591a
commit 605e977bcb
1 changed files with 96 additions and 0 deletions
--- a/bilibili导航滑动案例.html
+++ b/bilibili导航滑动案例.html
@ -0,0 +1,96 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bilibili导航滑动案例</title>
 </head>
 <body>
    <style>
        body,
        html {
            height: 100%;
            width: 100%;
            padding: 0;
            margin: 0;
        }
        .navbar {
            background-color: #ecf9fa;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 999;
            width: 100%;
        }
        div#myNavbar.nav-links {
            display: flex;
            justify-content: space-around;
            margin: 0;
            list-style: none;
            vertical-align: middle;
            font-size: 18px;
            font-weight: bold;
            width: 100%;
        }
        .nav-links a {
            text-decoration: none;
            color: #000;
            padding: 10px 15px;
            margin: 0 10px;
            padding: 20px;
            transition: border-bottom 0.3s ease;
            font-size: 18px;
            font-weight: bold;
        }
        .line {
            width: 60px;
            height: 5px;
            bottom: 0;
            display: flex;
            text-align: center;
            transform: translateX(130px);
            background-color: #000;
            position: absolute;
            transition: transform 0.3s ease;
        }
    </style>
    <nav class="navbar">
            <div class="nav-links" id="myNavbar">
                <a href="#college">首页</a>
                <a href="#news">分类<a>
                <a href="#PartyBuilding">报道</a>
                <a href="#department">资讯</a>
                <a href="#congratulation">交流</a>
            </div>
            <div class="line"></div>
    </nav>
    <script>
        //获取父元素，添加事件委托
        const list = document.querySelector('.nav-links')
        const line = document.querySelector('.line')
        //给a注册事件
        list.addEventListener('click', function (e) {
            if (e.target.tagName === 'A') {
                // console.log(11);
                //得到当前offsetLeft的值
                // console.log(e.target.offsetLeft);
                line.style.transform = `translateX(${e.target.offsetLeft}px)`
            }
        })
    </script>
 </body>
 </html>