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

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

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

前言

最近在搞视频的时候突然想加一个弹幕功能,但对我这样一个不会前端的人来说实在是太难了。
html实现弹幕功能 简单的小功能_第1张图片
于是打开了万能的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>Documenttitle>
    <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 = $('');
                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>

成果


整个功能很简单,可以搭配视频加数据库一起弄,这些功能就先不写了,有兴趣但不知道怎么做的,可以在下面评论,我们一起交流交流。

你可能感兴趣的:(前端,前端)