京东页面指示器和返回顶部

1 month ago · e94d590d1b
parent 294cba86a8
commit e94d590d1b
1 changed files with 113 additions and 0 deletions
--- a/京东导航.html
+++ b/京东导航.html
@ -0,0 +1,113 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仿京东页面</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .boxbig{
            position: relative;
            width: 100%;
            height: 40px;
            background-color: #e4e4e4;
            text-align: center;
            line-height: 40px;
        }
        .boxbig ul{
            display:flex;
            /* 小圆点没了 */
            list-style: none;
            justify-content:center;
        }
        .boxbig ul li{
            margin: 0 20px;
            font-size: 20px;
        }
        .boxbig  ul li a{
            /* 下划线没了 */
            text-decoration:none;
            color: black;
            border-bottom: 2px solid transparent;
        }
         .boxbig ul li a.active{
            border-color: #e1251b;
            color: #e1251b;
        }
        .box2{
            width: 100%;
            height: 1000px;
            background-color: pink;
        }
        .box2 p{
            font-size: 30px;
            text-align: center;
           margin: 50px 0;
        }
        .box3{
            position: fixed;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: aliceblue;
            bottom: 15px;
            right: 15px;
            display: none;
        }
    </style>
 </head>
 <body>
    <div class="boxbig" >
        <ul>
            <li><a href="#"  class="active">首页</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="box2">
 <p>到这里出现返回按钮</p>
   </div>
   <div class="box3"></div>
    <script>
        //1.获取元素
        const a=document.querySelectorAll('.boxbig a')
        let i=0
        console.log(a[0])
 for(let i=0;i<a.length;i++){
                a[i].addEventListener('mouseenter',function(){
                    console.log('鼠标移入')
 document.querySelector('.boxbig .active').classList.remove('active')
 this.classList.add('active')
                })
            }
      const p=document.querySelector('.box2 p')
      const btn=document.querySelector('.box3')
      const boxbig=document.querySelector('.boxbig')
 //页面滚动事件
 window.addEventListener('scroll',function(){
    // console.log('页面滚动了')
    //页面卷去的头部>=定位位置的距离
    if(window.pageYOffset>=p.offsetTop){
        document.querySelector('.box3').style.display='block'
    }else{
        document.querySelector('.box3').style.display='none'
    }
 })
  //按钮点击事件
 btn.addEventListener('click',function(){
    boxbig.scrollIntoView({
        block:"start"
    })
 })
    </script>
 </body>
 </html>