用js实现百度热搜榜的动态的效果

• html代码如下

       <div class="box">
        <ul>
            <li class="active">
                <div class="imgbox">
                    <div class="imgname"><div><span>1</span>“鱼头人”现身央视直播</div></div>
                    <img src="https://fyb-1.cdn.bcebos.com/hotboard_img/704d02b8f97781861dce050a22f8f970?x-bce-process=image/resize,m_fill,w_732,h_272">
                </div>
                <p><span>1</span>“鱼头人”现身央视直播</p>
            </li>
            <li>
                <div class="imgbox">
                    <div class="imgname"><div><span>2</span>今年全球整体通胀率创10年新高</div></div>
                    <img src="https://fyb-1.cdn.bcebos.com/hotboard_img/0c754beeb819c23e0fa90f1a12650a24?x-bce-process=image/resize,m_fill,w_732,h_272">
                </div>
                <p><span>2</span>今年全球整体通胀率创10年新高</p>
            </li>
            <li>
                <div class="imgbox">
                    <div class="imgname"><div><span>3</span>央视网评文峰“彩虹屁”</div></div>
                    <img src="https://fyb-1.cdn.bcebos.com/hotboard_img/0c754beeb819c23e0fa90f1a12650a24?x-bce-process=image/resize,m_fill,w_732,h_272" alt="">
                </div>
                <p><span>3</span>央视网评文峰“彩虹屁”</p>
            </li>
            <li>
                <div class="imgbox">
                    <div class="imgname"><div><span>4</span>朔尔茨正式当选德国总理</div></div>
                    <img src="https://fyb-1.cdn.bcebos.com/hotboard_img/493c435ada229d2ba8faebf2f8162f63?x-bce-process=image/resize,m_fill,w_732,h_272" alt="">
                </div>
                <p><span>4</span>朔尔茨正式当选德国总理</p>
            </li>
            <li>
                <div class="imgbox">
                    <div class="imgname"><div><span>5</span>德国新任总理朔尔茨向默克尔献花</div></div>
                    <img src="https://fyb-1.cdn.bcebos.com/hotboard_img/a36ad78709596f20cb62ea967c629e48?x-bce-process=image/resize,m_fill,w_732,h_272" alt="">
                </div>
                <p><span>5</span>德国新任总理朔尔茨向默克尔献花</p>
            </li>
            <li>
                <div class="imgbox">
                    <div class="imgname"><div><span>6</span>“抢甘蔗事件”老人:不原谅他们</div></div>
                    <img src="https://fyb-1.cdn.bcebos.com/hotboard_img/bf8c8f1ca8d7a9c93550e3c90d3e3ea4?x-bce-process=image/resize,m_fill,w_732,h_272" alt="">
                </div>
                <p><span>6</span>“抢甘蔗事件”老人:不原谅他们</p>
            </li>
        </ul>
    </div>

• css代码如下

<style>
        * {
            margin: 0;
            padding: 0;
        }
        html,body {
            height: 100%;
            overflow: hidden;
            background-image: linear-gradient(180deg, #f44522 0%, #fff 88%);
        }
        .box {
            width: 400px;
            height: 500px;
            background-color: #fff;
            border-radius: 12px;
            margin: 30px auto;
            box-shadow: 0 0 2px rgba(0,0,0,0.1);

        }
        ul {
            list-style: none;
        }
        li {
            position: relative;
            height: 30px;
            line-height: 30px;
            color: #666;
            font-size: 14px;
            transition: all 0.5s;
        }
        
        li>p {
            /* position: absolute; */
            width: 100%;
            height: 30px;
            line-height: 30px;
            bottom: 0;
            z-index: 9;
            opacity: 1;
            padding-left: 10px;
        }
        li>p span {
            font-weight: 700;
            color: #9599A6;
            margin-right: 10px;
        }
        .imgbox {
            position: relative;
            width: 100%;
            height: 0;
            /* z-index: 2; */
            border-radius: 8px;
            opacity: 0;
            transition: all 0.5s;
        }
        .imgbox .imgname {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 0;
            opacity: 0;
            line-height: 30px;
            color: #fff;
        }
        .imgbox img {
            width: 100%;
            height: 100%;
        }
        
        .active {
            height: 136px;
        }
        .active  .imgbox {
            height: 136px;
            opacity: 1;
            
        }
        .active p {
            height: 0;
            opacity: 0;
        }
       .active .imgbox .imgname {
           height: 30px;
           opacity: 1;
       }
    </style>

• js代码如下

   <script>
        let lis = document.querySelectorAll('li')
        let timer
        for(let i = 0; i < lis.length; i++) {
            lis[i].addEventListener('mouseenter',function() {
                timer = setTimeout(() => {
                    for(let j = 0; j < lis.length; j++) {
                        lis[j].classList.remove('active')
                    }
                    lis[i].classList.add('active')
                },300)
                lis[i].addEventListener('mouseleave',function() {
                    if(timer) {
                        clearTimeout(timer)
                    }
                })
            })
          
        }
        
    </script>