滚动字幕效果-优快云博客

本文链接：https://blog.youkuaiyun.com/self_correction/article/details/128723964

该文章提供了一个使用HTML、CSS和JavaScript实现的滚动字幕Demo，字幕从左向右滚动，颜色和大小随机，底部有发送新弹幕的功能。通过JS设置计时器和动态改变元素位置实现滚动效果，当字幕移出屏幕时清除。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

滚动字幕

一、Demo
- <1>.要求
- <2>.功能
二、实现原理
三、代码
四、效果展示

一、Demo

<1>.要求

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

<2>.功能

限时，反应用户活跃程度

二、实现原理


JS:设置一个num值初始等于页面可见区域右边的值，
创建一个计时器，然后num--，页面左移，从而实现文字的滚动
文字到达页面左端，再清除元素即可

三、代码

<1>.Html部分

<!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>滚动字幕</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div class="boxDom" id="boxDom">
        <div class="idDom" id="idDom">
            <div class="content">
                <p class="title">字幕:</p>
                <input type="text" class="text" id="text"/>
                <button type="button" class="btn" id="btn">发送</button>
            </div>
        </div>
    </div>
    <script src="./index.js"></script>
</body>
</html>

<2>.Css部分

*{
    margin: 0px;
    padding: 0px;
}
html,body{
    width: 100%;
    height: 100%;
    font-family: "微软雅黑";
    font-size: 62.5%;
}

.boxDom{
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.idDom{
    width: 100%;
    height: 100px;
    background: #ccc;
    position: fixed;
    bottom: 0px;
}

.content{
    display: inline-block;
    width: 430px;
    height: 40px;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    margin: auto;
}

.title{
    display: inline;
    font-size: 4em;
    vertical-align: bottom;
    color: #fff;
}

.text{
    border: none;
    width: 300px;
    height: 30px;
    border-radius: 5px;
    font-size: 2.4em;
}

.btn{
    width: 60px;
    height: 30px;
    background: #000;
    border: none;
    color: #fff;
    font-size: 2.4em;
}

span{
    width: 300px;
    height: 40px;
    position: absolute;
    overflow: hidden;
    color: #000;
    font-size: 4em;
    line-height: 1.5em;
    cursor: pointer;
    white-space: nowrap;
}

<3>.Js部分

var colors = [                          //用来设置的颜色
    "#369","#16481f","orange",
    "red","skyblue","gray","#aaa",
    "lightgreen","green","darkblue",
    "#06257b","darkred","#e0a111",
    "black", "#e2128f", "#860dad", 
    "#94ad0d", "#ce3131"
]; 

function $(id){
 return document.getElementById(id);
}

window.onload = function (){
    $('btn').onclick = function (){
        var timer;                                      //timer不能设置成全局变量，如果设置成全局变量，他的值将始终不会清空
        var input = $('text');
        var span = document.createElement('span');      //创建一个span标签
        span.innerHTML = input.value;                   //行级元素用value来获取值，块级元素用innerhtml来获取其值
        $('boxDom').appendChild(span);                  //将span放入页面div中
        span.style.color = colors[parseInt(Math.random()*colors.length)]; 
        //随机产生颜色，用Math.random获得的值是小数所以要取整并且取值大于等于0小于1,有18种颜色
        span.style.top = (Math.random()*400) + 'px'; //随机产生一个值为[0,400);
        var wWidth = document.body.clientWidth;  
        span.style.left = document.body.clientWidth+ 'px';  //初始值为页面可见区域的值，此时不能再页面中显示
        var num = wWidth;
        timer = setInterval(function (){
            num--;                                       //让内容移动
        if(num < -400){
            $('boxDom').removeChild(span);           //清除元素
            clearInterval(timer);
        }
        span.style.left = num + 'px';
        },10)
    } 
}