弹幕是一个很常见的功能，下面是本人封装的一个小小的实现方案，存在不足之处可以提出来或自由改进。

直接上代码：复制可运行

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">

        <meta content="yes" name="apple-mobile-web-app-capable">

        <meta content="black" name="apple-mobile-web-app-status-bar-style">

        <meta content="telephone=no" name="format-detection">

        <meta content="email=no" name="format-detection">

        <meta name="full-screen" content="yes">

        <meta name="browsermode" content="application">

        <meta name="full-screen" content="yes">

        <meta name="browsermode" content="application">

        <meta name="x5-orientation" content="portrait">

        <title>js实现弹幕</title>

        <style>

            html,body{

                position: relative;

                width: 100%;

                max-width: 750px;

                margin: auto;

                height: 100%;

                background: #fff;

                overflow: hidden;

                font-family: SimSun,arial;

            }

            .tmBox{

                width: 100%;

                height: 16rem;

                background: #5e907b;

                position: relative;

            }

            .btn{

                display: block;

                margin: auto;

                margin-top: 20px;

                width: 100px;

                height: 40px;

                outline: none;

            }

            .tmItem{

                position: absolute;

                width: auto;

                height: auto;

                padding:4px;

            }

            .tmItem.runTm{

                animation: runTmEfe 4s linear 0s 1 alternate;

                animation-fill-mode: backwards;

            }

            @keyframes runTmEfe{

                from{transform: translateX(18.75rem);}

                to{transform: translateX(-100%);}

            }

        </style>

    </head>

    <body>

        <div class="tmBox">

        </div>

        <button class="btn start">开启弹幕</button>

        <button class="btn stop">停止弹幕</button>

        <button class="btn pause">暂停画面</button>

        <button class="btn resume">恢复弹幕</button>

        <button class="btn send">发射弹幕</button>

        <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.js" ></script>

        <script>

            //根字体设置

            function setHtmlFontSize(){

                var w = document.documentElement.clientWidth;

                if(w > 750){

                    w = 750;

                }

                var fz = w * 20 / 375;

                document.getElementsByTagName('html')[0].style.fontSize = fz + 'px';

            }

            //实时根据屏宽来适应字体

            setHtmlFontSize();

            window.onresize = function(){

                setHtmlFontSize();

            }

            //获取不重复随机数列

            function getOrder(start, end){

                var len = end - start + 1;

                var myorder = new Array();

                var index = 0;

                while (index < len) {

                  var flag = true;

                  var num = parseInt(Math.floor(Math.random() * len) + start);

                  for (var i = 0; i < myorder.length; i++) {

                    if (myorder[i] == num) {

                      flag = false;

                      break;

                    }

                  }

                  if (flag) {

                    myorder[index] = num;

                    index++;

                  }

                }

                return myorder;

            }

            //弹幕的设置

            var tmEntity={

                //弹幕内容

                tmList:[

                    '测试弹幕01',

                    '测试弹幕02',

                    '测试弹幕03',

                    '测试弹幕04',

                    '测试弹幕05',

                    '测试弹幕06',

                    '测试弹幕07',

                    '测试弹幕08',

                    '测试弹幕09',

                    '测试弹幕10'

                ],

                //弹幕列表上限

                tmMaxLines:10,

                //弹幕行数

                tmRows:10,

                //初始弹幕索引

                initIndex:0,

                //弹幕过度时间 s

                tmTranstionTime:0.4,

                //屏幕宽度

                swidth:document.documentElement.clientWidth,

                //弹幕循环

                isRunTm:true,

                //弹幕父容器class

                tmFatherClass:".tmBox",

                //弹幕class

                tmClass:".tmItem",

                //弹幕高度

                tmHeight:$(".tmBox").height() / 10,

                //屏中最低弹幕数

                screenTmNum:7

            }

            console.log(tmEntity);

            var rowsOrder=getOrder(0,tmEntity.tmRows-1);

            var timeOrder=getOrder(0,tmEntity.tmRows-1);

            //添加弹幕

            function addTm(item,i,max){

                var obj="<div class='"+tmEntity.tmClass.replace('.','')+" runTm' style='transform: translateX("+tmEntity.swidth+"px);animation-delay:"+(timeOrder[timeOrder.length-1]*tmEntity.tmTranstionTime)+"s;top:"+(rowsOrder[rowsOrder.length-1] * tmEntity.tmHeight)+"px'>"+item+"</div>";

                $(tmEntity.tmFatherClass).append(obj);

                //addListenerStart($(tmEntity.tmClass).eq(tmEntity.initIndex));

                addListenerEnd($(tmEntity.tmClass).eq(tmEntity.initIndex));

                tmEntity.initIndex++;

                //校验行

                rowsOrder.pop();

                if(rowsOrder.length==0){

                    rowsOrder=getOrder(0,tmEntity.tmRows-1);

                }

                timeOrder.pop();

                if(timeOrder.length==0){

                    timeOrder=getOrder(0,tmEntity.tmRows-1);

                }

            }

            function addListenerEnd(el){

                el.on("animationend webkitAnimationEnd", function(){

                    el.remove();

                    tmEntity.initIndex--;

                    if(tmEntity.isRunTm && $(tmEntity.tmFatherClass+" "+tmEntity.tmClass).length <= tmEntity.screenTmNum){

                        initTm(tmEntity.tmList);

                    }

                });

            }

            function addListenerStart(el){

                el.on("animationstart webkitAnimationStart", function(){

                });

            }

            function initTm(list){

                for(var i=0;i<list.length;i++){

                    addTm(list[i],i,list.length);

                }

            }

            //开始弹幕

            function startTmRun(){

                initTm(tmEntity.tmList);

                tmEntity.isRunTm = true;

            }

            //停止产生弹幕

            function stopTmRun(){

                tmEntity.isRunTm = false;

            }

            //暂停弹幕

            function pauseTmScreen(){

                $(tmEntity.tmClass).css({"WebkitAnimationPlayState":"paused","AnimationPlayState":"paused"});

            }

            //继续弹幕

            function resumeTmScreen(){

                $(tmEntity.tmClass).css({"WebkitAnimationPlayState":"running","AnimationPlayState":"running"});

            }

            //发射单条弹幕

            function sendTm(str){

                var str=str+(Math.floor(Math.random()*(tmEntity.tmMaxLines-1+1)+1));

                tmEntity.tmList.push(str);

                if(tmEntity.tmList.length > tmEntity.tmMaxLines){

                    tmEntity.tmList.splice(0,tmEntity.tmList.length-tmEntity.tmMaxLines);

                    console.log(tmEntity.tmList);

                    console.log(tmEntity.tmList.length);

                }

            }

            $(".btn.start").click(function(){

                startTmRun();

            })

            $(".btn.pause").click(function(){

                pauseTmScreen();

            })

            $(".btn.resume").click(function(){

                resumeTmScreen();

            })

            $(".btn.stop").click(function(){

                stopTmRun();

            })

            $(".btn.send").click(function(){

                sendTm("最帅的南哥");

            })

        </script>

    </body>

</html>

效果如图：

点击开启弹幕按钮：

js实现弹幕的更多相关文章

  1. 原生JS实现弹幕效果

    纯属无聊写的,可能有很多问题,欢迎批评指教. 效果图:图一是预设的一些弹幕,图二是自己发射的弹幕,效果是一样的.   首先是弹幕的位置,是要从最右滑到最左,为了防止随机高度弹幕会覆盖的问题,设置了通道 ...

  2. js实现弹幕效果

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...

  3. JS 发送弹幕

    JS实现弹幕的发送 <div class="box1"> <div class="box2" style="width: 600px ...

  4. JS原生实现视频弹幕Demo（仿）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  5. 弹幕文化与HTML5

    分享人:herry 弹幕篇:弹幕文化与HTML5 说说弹幕 弹幕文化 1什么是弹幕? 弹(dàn)幕(mù)在国内兴起已经有个把年了,相信很多朋友都差不多知道弹幕这个东西. 弹幕系统最初的起源是一家日 ...

  6. JavaScript简单的弹幕

    弹幕 首先是弹幕的位置,是要从最右滑到最左,为了防止随机高度弹幕会覆盖的问题,设置了通道. 每一个通道是从左到右的一条,高度固定,这样不同通道的弹幕不会相互覆盖. 弹幕滑动就是简单设置CSS属性  t ...

  7. 基于jquery的弹幕实现

    前几天,需要做一个弹幕展示效果,看了网上很多资料,但是很不凑巧,都不能满足自己的需求和功能点,但是总不能放弃吧,那么就自己写一个,今天把成果分享给大家,首先说一下市面上比较流行的弹幕插件吧: 1.有关 ...

  8. 让弹幕给 PPD 生个孩子

    怎样才能跑起来我写的弹幕程序 资源下载 申请野狗后端云账号注册 创建应用: 复制appId到index.html的 var ref = new Wilddog("https://<ap ...

  9. 【Java EE】从零开始写项目【总结】

    从零开发项目概述 最近这一直在复习数据结构和算法,也就是前面发出去的排序算法八大基础排序总结,Java实现单向链表,栈和队列就是这么简单,十道简单算法题等等... 被虐得不要不要的,即使是非常简单有时 ...

随机推荐

  1. @Autowired自动装配原理

    在类中为类名添加 @Auwowired注解,为该类在spring中注册成组件 1,先按照类型在容器中找对应的组件:找到一个, 直接赋值,一个都没找到, 抛异常 2,找到了多个:按变量名作为ID继续匹配 ...

  2. 我要进大厂之大数据Hadoop HDFS知识点（2）

    01 我们一起学大数据 老刘继续分享出Hadoop中的HDFS模块的一些高级知识点,也算是对今天复习的HDFS内容进行一次总结,希望能够给想学大数据的同学一点帮助,也希望能够得到大佬们的批评和指点! ...

  3. jwt鉴权学习 (php示例代码)

    前段时间听朋友讲起 jwt鉴权,博主我是一脸懵逼,通过朋友坚持不懈的讲解,我终于听懂了,jwt就是登陆token校验嘛 然而事情并不是博主想象的那么简单,在一个艳阳高照,晴空万里的夜晚,博主手贱百度了 ...

  4. FL studio系列教程（十）：FL Studio中如何新建样本

    FL Studio中强调以样本为核心的编曲模式.样本其实就是一个小的音序片段,可以是单独的乐器或单独的打击乐,还可以是他们组合的一个小音序片段,它是我们学习编曲的最基础知识.所以本文主要为大家讲解的是 ...

  5. 怎么用iMindMap思维导图做自我介绍

    相信大家在工作生活当中对于自我介绍这件事情都很是头疼的.太简单的介绍重点不突出,太冗长的介绍又会让人没印象.这一切都跟我们大脑水平.散乱的思维模式有关,因此想要自我介绍在众人中脱颖而出,让人印象深刻, ...

  6. 安装卸载nginx

    http://www.nginx.cn/install ubuntu和debain下的apt方式安装软件很方便,特别是对于新手安装和卸载nginx. 由于nginx不能动态添加模块,所以会经常安装和卸 ...

  7. yii2.0 模态框简单使用

    1 <?php foreach($data as $model) :?> 2 3 <!-- 按钮触发模态框 --> 4 <button class="btn b ...

  8. 01-01.单一职责原则(Single Responsibility)

    1.基本介绍 对于类来说的,就是一个类,应该只负责一项职责(一个类只管一件事). 如类A负责两个不同职责:职责1,职责2. 当职责1需求变更而改变A时,可能造成职责2执行错误,所以需要将类A的粒度分解 ...

  9. qsort的cmp函数理解

    qsort使用 近期频繁使用qsort函数,但是对于cmp函数却一直不太熟悉,现用现查.故写一篇小笔记记录一下. 函数原型: void qsort(void *base,size_t NumEle,s ...

  10. Arcgis基于高程（DEM）计算地形湿度指数（TWI），以及坡度（Slope）度单位转换为弧度

    以30m*30m分辨率的图层为例 一.基于表面工具箱Surface计算Slope 1.如下图输入图层DEM,输出Slope 2.单位转换: Scale_slope=Slope*pi/180 二.基于水 ...