利用jquery简单快速实现视频弹幕效果

最新推荐文章于 2022-12-28 16:40:09 发布

年年有餘

最新推荐文章于 2022-12-28 16:40:09 发布

阅读量782

点赞数

分类专栏：简记文章标签：文字弹幕视频弹幕

本文链接：https://blog.csdn.net/sxiagn/article/details/94555501

版权

简记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

现在很多线上视频都有文字弹幕的效果，这里简单介绍一下如何实现。

***核心思路是：***当点击发送弹幕后，就动态创建一个新的span，加到存放视频的div里面。span需要定位在div的右侧，具体位置可以随机或者指定一个范围，然后添加动画让span移动到div的左侧。
基本布局图
html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            width: 1000px;
            margin: 50px auto;
        }
        .box .video {
            width: 1000px;
            height: 600px;
            background: skyblue;
            position: relative;
            overflow: hidden;
        }
        .box .content {
            background: #333;
            height: 30px;
            padding: 10px;
        }
        .box .content input {
            float: right;
            border: none;
            outline: none;
            padding: 0 15px;
            height: 30px;
            line-height: 30px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="video"></div>
        <div class="content">
            <input type="button" value="发射">
            <input type="text">
        </div>
    </div>
</body>
</html>

开始添加动画

 <script src="./jquery-1.12.4.min.js"></script>  
    <script>
    
        // 随机生成颜色模块
        function randomColor() {
            var r = parseInt(Math.random() * 256);
            var g = parseInt(Math.random() * 256);
            var b = parseInt(Math.random() * 256);
            return 'rgb(' + r + ',' + g + ',' + b + ')';
        }
        
        // 给按钮添加点击事件
        $(":button").click(function () {
       		// 准备生成的span的随机位置
            var randomTop = Math.random() * $(".video").height();
            $("<span></span>").text($(":text").val()).css({
                position: "absolute",
                top: randomTop,
                right: -60,
                color: randomColor(),
                display: "block",
                whiteSpace: "nowrap"  // 强制一行显示，这个是必备的，不然文字跑到左边的时候回自动换行
            }).appendTo($(".video")).animate({
                right: $(".video").width()
            }, 2000,function(){
            // span的动画完成后及时清除掉
               $(this).remove();
            });
            // 动画完成后将输入框的内容清空
            $(":text").val("");
        });
        
        // 按下enter键发送
        $(":text").keydown(function(e){
        // 我们键盘的enter键是13
            if(e.keyCode == 13){
                $(":button").trigger("click");
            }
        });
    </script>

文字弹幕的效果实现起来比较简单，需要注意的一点是，要让span的文字强制一行显示，这样才不会出现跑到盒子左边的时候文字自动换行的现象。