滚动弹幕演示

最新推荐文章于 2024-11-02 12:42:04 发布

black_tea114514

最新推荐文章于 2024-11-02 12:42:04 发布

阅读量603

点赞数

文章标签： javascript 前端 css3

本文链接：https://blog.csdn.net/black_tea114514/article/details/128664611

版权

要求：

1.页面上漂浮字体大小不一、颜色不一，从左向右滚动的弹幕；
2.底部中间有一个发送功能，可以发送新的弹幕；
3.底部的发送部分可以向下收起和弹出。

原理：

获取父元素，创建新的节点，input获取value值，用innerHTML添加进获取的value值，完成弹幕设置
其中滚动用到chuan新标签<marquee></marquee>

代码：

    <style>
        *{margin: 0;padding: 0;}
        #box{
            background-color:bisque;
            width: 500px;
            height: 200px;
            position: relative;
        }
        marquee{
            position: absolute;
         }
        #box_one{
            font-size: 18px;
            color: brown;
            width: 100%;
            top:10px 
        }
        #box_two{
            font-size: 13px;
            color: coral;
            width: 100%;
            top:40px 
        }
        #box_three{
            font-size: 15px;
            color:blue;
            width: 100%;
            top:70px 
        }
        #box_four{
            font-size: 20px;
            color:red;
            width: 100%;
            top:90px 
        }
        #box_five{
            font-size: 8px;
            color: black;
            width: 100%;
            top:120px 
        }
        #danmu{outline:none;}
        #text{
            width: 500px;
            text-align: center;
        }
        #jiantou{
            background: url(./下箭头.png);
            display: inline-block;
            background-size: cover;
            position: absolute;
            width: 30px;
            height: 30px;
            bottom: 0px;
            left: 220px;
            cursor:default
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="jiantou"></div>
        <marquee id="box_one">1111111</marquee>
        <marquee id="box_two">222222222222</marquee>
        <marquee id="box_three">33333333333333333333</marquee>
        <marquee id="box_four">4444</marquee>
        <marquee id="box_five">55555555555</marquee>
    </div>
    <div id="text" style="display: none;">
        <input type="text" id="danmu">
        <button>发送</button>
    </div>
    <script>
        var jt = document.querySelector("#jiantou")
        var box = document.querySelector("#box")
        var btn = document.querySelector("button")
        var danmu = document.querySelector("#danmu")
        var text = document.querySelector("#text")
        btn.onclick = function(){
            var value = danmu.value
            var omarquee = document.createElement("marquee");
            omarquee.innerHTML = `${value}`
            box.appendChild(omarquee)
            var time = setTimeout(function(){
                danmu.value=""
            },50)
        }
        jt.onclick = function(){
            text.style = "display: block"
        }
    </script>
</body>