实现滚动弹幕

最新推荐文章于 2023-01-17 13:58:02 发布

Whnist

最新推荐文章于 2023-01-17 13:58:02 发布

阅读量437

点赞数

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/Meg_Fu/article/details/128714025

版权

内容
1.页面上漂浮字体大小不一、颜色不一，从左向右滚动的弹幕;
2.底部中间有一个发送功能，可以发送新的弹幕;
3.底部的发送部分可以向下收起和弹出。
原理
用倒计时实现弹幕滚动
对标签添加颜色和字幕大小
代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <style>
    *{
        margin: 0;
        padding: 0;
        text-decoration: none;
    }
    .top{
        position: relative;
        height: 600px;
        background-color: white;
    }
    .bottom{
        display: block;
        width: 100%;
        height: 240px;
        background-color: rgb(210, 253, 255);
    }
    .one{
        display: block;
        position: absolute;
        right: 500px;
        bottom: 30px;
        width: 40px;
        height: 40px;
        font-size: 14px;
        background-color: rgb(59, 186, 167);
        text-align: center;
        color: black;
        line-height: 40px;
        border-radius: 20%;
    }
    .two{
        display: block;
        position: absolute;
        right: 550px;
        bottom: 30px;
        width: 40px;
        height: 40px;
        font-size: 14px;
        background-color: rgb(39, 117, 106);
        text-align: center;
        color: black;
        line-height: 40px;
        border-radius: 20%;
    }
    span{
        display: inline-block;
        position: absolute;
        left: 0;
    }
    input{
        margin-left: 530px;
        margin-top: 40px;
        width: 300px;
        height: 25px;
        border:1px solid black;
        background-color: rgba(255, 255, 255, 0.871);
        padding-left: 15px;
        border-radius: 10px;
    }
    button{
        width: 55px;
        height: 25px;
        border-radius: 10px;
        border:1px solid black;
        background-color: rgb(171, 235, 226);
    }
    </style>
</head>
<body>
    <div class="top"></div>
    <div class="bottom">
        <input type="text" placeholder="发送弹幕--">
        <button>发送</button>
    </div>
    <a href="#" class="one">收起</a>
    <a href="#" class="two">弹出</a>
    <script>
        window.onload=function(){
        // 创建文字颜色和大小
        var ocolor = ["black","red","orange","yellow","green","blue","purple"]
        var osize = ["14px","16px","18px","20px","22px","24px"]
        var btn = document.querySelector("button")
        var top = document.querySelector(".top")
        var input = document.querySelector("input")
        btn.onclick=function(){
            // 将上面box里放入input输入的内容，设置span标签
            var span = document.createElement("span")
            top.appendChild(span)

            span.innerHTML=input.value
            // 给这个标签一个随机高度和颜色还有大小
            span.style.fontSize = osize[Math.round(Math.random()*7)]
            span.style.color = ocolor[Math.round(Math.random()*11)]
            span.style.top = Math.round(Math.random()*500)+"px"

            // 实现文字从左向右滚动
            // 利用定时器
            var step = 0
            var timer = setInterval(function(){
                step++
                span.style.left =step+"px" 

            // 弹幕到可视区域以外消失
                var out = span.offsetLeft+span.clientWidth
                if(out-window.innerWidth==0){
                    clearInterval(timer)
                    top.removeChild(span)
                }
            }, 5);
        }
        // 设置弹出和收起
        var one = document.querySelector(".one")
        one.onclick=function(){
            var bottom = document.querySelector(".bottom")
            bottom.style.height=90+"px"
            top.style.height=750+"px"
        }
        var two = document.querySelector(".two")
        two.onclick=function(){
            var bottom = document.querySelector(".bottom")
            bottom.style.height=240+"px"
            top.style.height=600+"px"
        }
    }   
    </script>
</body>
</html>

效果

弹幕

Whnist

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
实现滚动弹幕

/ 将上面box里放入input输入的内容，设置span标签。1.页面上漂浮字体大小不一、颜色不一，从左向右滚动的弹幕;2.底部中间有一个发送功能，可以发送新的弹幕;// 给这个标签一个随机高度和颜色还有大小。3.底部的发送部分可以向下收起和弹出。// 弹幕到可视区域以外消失。// 实现文字从左向右滚动。对标签添加颜色和字幕大小。// 创建文字颜色和大小。用倒计时实现弹幕滚动。// 设置弹出和收起。
复制链接

扫一扫