html实现弹幕功能简单的小功能

最新推荐文章于 2024-05-02 14:26:53 发布

小王不头秃

最新推荐文章于 2024-05-02 14:26:53 发布

阅读量5k

点赞数 11

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/qq_43627076/article/details/124270594

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

html实现弹幕功能简单的小功能

前言
实现
- 实现思路
- 具体实现
成果

前言

最近在搞视频的时候突然想加一个弹幕功能，但对我这样一个不会前端的人来说实在是太难了。
在这里插入图片描述
于是打开了万能的b站，您猜怎么着，就找到了相关的教学了。

实现

实现思路

这里主要是使用animate来自定义动画，其实就是实现一个滑块的动画就可以了。
这里先说一下animate的用法，示例如下

                      animate({
                            left: 0
                        }, 8000, 'linear', function({
                            $(this).remove();
                        });

各个参数，依次如下

第一个参数，其实就是设置动画对象最终的属性
第二个参数，设置由最初变成最终结果的的时间
第三个参数，设置动画的移动方式，这个参数是匀速
第四个参数，是动画完成之后的回调函数

在了解之后，我们就有一个大致的思路了

把动画对象放在右边
最终状态的对象放在左边，这样对象就可以从右边到左边移动了
设置好动画完成时间和移动方式，这样就可以比较舒服的看到弹幕了

具体实现

<!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>
    <script src="../../assets/js/jquery-1.8.1.js"></script>
</head>

<body>

    <div style="height: 800px;width: 800px;text-align: center;background-color: black;" id="main">

    </div>

    <script>
        infos = ['说得对', '我人傻了', '这是一条弹幕', '前端太难了', '好烦']

        setInterval(function() {
            for (r in infos) {
                //设置弹幕的样式和内容
                info = $('<span></span>');
                info.text(infos[r]);
                info.attr("style", "margin-right:0px;margin-top:" + Math.random() * 35 + "%;position:absolute;color:white;");
                //向弹幕显示区域添加弹幕
                $('#main').append(info);
                //设置动画
                info.animate({
                    left: 0
                }, 8000, 'linear', function() {
                    //动画完成后就删除
                    $(this).remove();
                });
            }

        }, 3000);
    </script>
</body>

</html>