JS实现腾讯视频弹窗功能

最新推荐文章于 2022-08-16 10:47:19 发布

你的 Alex

最新推荐文章于 2022-08-16 10:47:19 发布

阅读量929

点赞数

文章标签： js

本文链接：https://blog.csdn.net/m0_46232069/article/details/107051521

版权

腾讯视频的弹窗

下图是我们要实现功能的展示，当鼠标滑过会出现下图的弹窗，原生js实现下图的功能👦
在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <div class="wapper">
        <div class="nav">
            <a href="#" class="nav-blod nav-1">综艺</a>
            <a href="#" class="T4">腾讯自制</a>
            <a href="#">独播</a>
        </div>
        <div class="nav">
            <a href="#" class="nav-blod nav-2">动漫</a>
            <a href="#" class="T4">国漫</a>
            <a href="#">日漫</a>
        </div>
        <!-- 弹窗部分 -->
        <div class="nav_mask_area">
            <div class="nav_mask_title">
                <a href="#">全部综艺</a>
            </div>
            <div class="nav_mask_inner">
                <a href="#">创造营2020</a>
                <a href="#">炙热的我们</a>
                <a href="#">奔跑吧4</a>
                <a href="#">让生活更好看</a>
                <a href="#">拜托了冰箱</a>
                <a href="#">青春环游记</a>
                <a href="#">极限挑战</a>
                <a href="#">横冲直撞20</a>
                <a href="#">王牌对王牌5</a>
                <a href="#">欢乐喜剧人6</a>
                <a href="#">歌手.当打之年</a>
                <a href="#">天赐的声音</a>
                <a href="#">我家那闺女我家那闺女我家那闺女</a>
                <a href="#">吐槽大会4</a>
                <a href="#">笑场</a>
            </div>
        </div>
    </div>
    <script>
        (function () {
            var timer = null;
            var eare = document.getElementsByClassName('nav_mask_area')[0];
            var btn2 = document.getElementsByClassName('nav-2')[0];
            var btn1 = document.getElementsByClassName('nav-1')[0];
            btn2.onmouseenter = function () {
                eare.style.display = 'block';
                eare.style.bottom = '50px';
                clearInterval(timer);
                eare.onmouseleave = function () {
                    eare.style.display = 'none';
                }
                eare.onmouseenter = function () {
                    clearInterval(timer)
                }
                this.onmouseleave = function () {

                    timer = setTimeout(function () {
                        eare.style.display = 'none';
                    }, 500)
                };

            }


            btn1.onmouseenter = function () {
                eare.style.display = 'block';
                eare.style.bottom = '106px';
                clearInterval(timer);
                eare.onmouseleave = function () {
                    eare.style.display = 'none';
                }
                eare.onmouseenter = function () {
                    clearInterval(timer);
                }
                this.onmouseleave = function () {

                    timer = setTimeout(function () {
                        eare.style.display = 'none';
                    }, 500)
                };

            }





        })()




    </script>
</body>

</html>

css

*{
    padding: 0;
    margin: 0;
    text-decoration: none;
}

.wapper{
    position: relative;
    width: 205px;
    margin: 400px auto;
}
.wapper  div.nav{
    padding: 0 12px;
    background: #f8f8f8;
    border-radius: 24px;
    margin-bottom: 16px;
    font-size: 0;
}
.wapper  div.nav a{
    display:inline-block;
    font-size: 15px;
    line-height: 42px;
    margin: 0 10px;
    color: #666;

}
.wapper  div.nav a.nav-blod{
    margin: 0 15px 0 6px;
    position: relative;
    font-weight: 700;
    color: #000;
}
.wapper  div.nav a.nav-blod::after{
    position: absolute;
    content: '';
    width: 1px;
    height: 12px;
    background-color: #ccc;
    top: 50%;
    right: -12px;
    margin-top:-6px;

}
.wapper  div.nav a.nav-blod:hover{
    color: #ff5c38;
}
a.T4{
    width: 60px;
}

/* 下面是弹窗的部分 */
.nav_mask_area{
    display: none;
    position: absolute;
    left: 0;
    bottom: 106px;
    padding: 28px 0 28px 30px;
    width: 360px;
    background: white;
    box-shadow: 0 28px 50px rgba(25, 24, 40, 0.35);
    border-radius: 4px;
    white-space: normal;
}
.nav_mask_area:after{
    position: absolute;
    left: 60px;
    bottom: -14px;
    content: '';
    width: 0;
    height: 0;
    border:7px solid transparent;
    border-top-color: #fff;
}
.nav_mask_area .nav_mask_title{

}
.nav_mask_area .nav_mask_title a{
    display: inline-block;
    color:#ff5c38; 
    line-height: 18px;
    text-align: left;
}
.nav_mask_area .nav_mask_inner{
    font-size: 0;
   
}
.nav_mask_area .nav_mask_inner a{
    display: inline-block;
    width: 100px;
    font-size: 13px;
    margin: 15px 15px 0 0 ;
    line-height: 18px;
    color: #111;
    overflow: hidden;  
    white-space: nowrap;
    text-overflow: ellipsis;

}

你的 Alex

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JS实现腾讯视频弹窗功能

腾讯视频的弹窗下图是我们要实现功能的展示，当鼠标滑过会出现下图的弹窗，原生js实现下图的功能????<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</
复制链接

扫一扫