文档章节

js弹幕

JohanZ
 JohanZ
发布于 2015/04/02 10:50
字数 243
阅读 85
收藏 0
var danmu = {
                        play_width : 0, //银幕宽
                        play_height : 0, //银幕高
                        msg_stu : {}, //弹幕结构
                        msg_queue : [], //弹幕队列
                        play_screen : null,
                        addmsg : function(text){
                            mathHeight = Math.round(Math.random()*this.play_height);
                            speed = Math.round(5+Math.random()*20);
                            var msg = {
                                'left' : this.play_width,
                                'top' : mathHeight,
                                'text' : text,
                                'speed' : speed,
                            };
                            this.msg_queue.push(msg);
                        },
                        play : function(){
                            var i = 0;
                            for(var msg in this.msg_queue){
                                console.log(i);
                                if(this.msg_queue[i].left<(0-this.play_width)){
                                    this.removemsg(i);
                                }else{
                                    this.playmsg(i);
                                }
                                i++;
                            }
                        },
                        playmsg : function(i){
                            bullet = document.getElementById('zidan_'+i);
                            if(bullet!=undefined){
                                //子弹飞
                                this.msg_queue[i].left -= this.msg_queue[i].speed;
                                bullet.style.left = this.msg_queue[i].left+'px';
                                bullet.style.top = this.msg_queue[i].top+'px';
                            }else{
                                //创建子弹
                                b = document.createElement("font");
                                b.id = 'zidan_'+i;
                                msg = this.msg_queue[i];
                                b.style.position = 'absolute';
                                b.style.color = '#fff';
                                b.style.left = msg.left+'px';
                                b.style.top = msg.top+'px';
                                b.innerHTML = msg.text;
                                this.play_screen.appendChild(b);
                            }
                        },
                        removemsg : function(i){
                            bullet = document.getElementById('zidan_'+i);
                            bullet.style.left = this.play_width+'px';
                            this.msg_queue[i].left = this.play_width;
                        },
                        init : function(playid,btnid,textid){
                            this.play_width = document.getElementById(playid).offsetWidth;
                            this.play_height = document.getElementById(playid).offsetHeight;
                            this.play_screen = document.getElementById(playid);
                            this.play_screen.style.position = 'relative';
                            document.getElementById(btnid).onclick = function(){
                                danmu.addmsg(document.getElementById(textid).value);
                                console.log(danmu.msg_queue);
                            };
                            setInterval(function(){
                                danmu.play();
                            },50);
                        }
                    };
                    danmu.init('tangmu','inputBtn','inputText');
<div class="danmuBox"><div id="tangmu">2</div></div>
                     <div class="form">
                        <form>
                            <input type="text" placeholder="爱要大声说出来..." value="" maxlength="30" id="inputText" class="textarea" id="text">
                            <input type="button" value="向世界发布" class="submit inputBtn" id="inputBtn">
                            <input type="reset" value="不发了- -#" name="reset" class="reset inputBtn">
                        </form>
                    </div>


© 著作权归作者所有

共有 人打赏支持
下一篇: git命令
JohanZ
粉丝 1
博文 27
码字总数 7696
作品 0
福州
技术主管
私信 提问
加载中

评论(1)

m
maomao-1
弹幕除了楼主所演示的动态效果外,还有一个非常重要的一个实现,那就是如何实现其他人可以收到你的弹幕,怎样做到实时。
就此,我在这里做个补充,希望对大家有用。要实现实时推送与接收,那么就涉及到了另一个技术点web实时消息推送, 以往大家都基本上是用ajax,轮询来自己实现,但是这样做有个缺陷那就是非常浪费客户端资源增加服务器端的负担。个人推荐使用第三方推送服务,例如 goeasy推送就是个非常简单稳定的服务。
实现了实时推送,那么整个弹幕功能就更完整了。
FlowPlayer 播放器加上弹幕功能,通过 AJAX 保存弹幕至 XML

[背景] flowplayer加上弹幕功能(可以git上找到源码,在官网有二进制包)(https://github.com/flowplayer/flash)(不用FLOWPLAYER也行,但是要支持FLV和M3U8(最好还有直播流)) [需求] as或者...

晓远夜子家蹲
2016/02/14
22
10
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)

之前在一个移动端的抽奖页面中,在抽奖结果的展示窗口需要弹幕轮播显示,之前踩过一些小坑,现在总结一下前端弹幕效果的实现方式。 css3实现乞丐版的弹幕 css3弹幕性能优化 canvas实现弹幕 ...

yuxiaoliang
2018/07/11
0
0
【BUG】【微信端】【开发环境1.4.0】bug清单,需开发确认

以下问题均为iPhone5c/iOS9.3.1机器上出复现: 横屏之后,ppt底部被弹幕输入框遮挡,弹幕输入框无法隐藏 横屏之后,发送弹幕,弹幕从屏幕中线右侧出现 横屏之后切换到竖屏,发送弹幕,弹幕没...

Joiningss
2016/06/08
3
6
高性能弹幕引擎 - Bullet-screen Engine

BulletScreenEngine English Version 详细使用说明请查看wiki 高性能弹幕引擎。同屏弹幕1000+ 简介 一个高性能弹幕引擎,简单易用。支持CSS3、Canvas 2D、WebGL渲染方式。支持顶部、底部、逆...

早知今日何必当猪
01/05
0
0
flash 播放器 直播 rtmp协议 弹幕 时移 线路切换

flash 播放器 直播协议rtmp 弹幕JS 时移 线路切换 等基本功能 配合wowza流媒体 做提供相关接口 外部调用 模仿斗鱼播放器

德如海网络科技有限公司
2016/04/29
3
0

没有更多内容

加载失败,请刷新页面

加载更多

vue 对对象的属性进行修改时,不能渲染页面 vue.$set()

我在vue里的方法里给一个对象添加某个属性时,我console.log出来的是已经更改的object ,但是页面始终没有变化 原因如下: **受现代 JavaScript 的限制 (而且 Object.observe 也已经被废弃),...

Js_Mei
45分钟前
0
0
开始看《Java学习笔记》

虽然书买了很久,但一直没看。这其中也写过一些Java程序,但都是基于IDE的帮助和对C#的理解来写的,感觉不踏实。 林信良的书写得蛮好的,能够帮助打好基础,看得出作者是比较用心的。 第1章概...

max佩恩
昨天
12
0
Redux 三大原则

1.单一数据源 在传统的MVC架构中,我们可以根据需要创建无数个Model,而Model之间可以互相监听、触发事件甚至循环或嵌套触发事件,这些在Redux中都是不被允许的。 因为在Redux的思想里,一个...

wenxingjun
昨天
8
0
跟我学Spring Cloud(Finchley版)-12-微服务容错三板斧

至此,我们已实现服务发现、负载均衡,同时,使用Feign也实现了良好的远程调用——我们的代码是可读、可维护的。理论上,我们现在已经能构建一个不错的分布式应用了,但微服务之间是通过网络...

周立_ITMuch
昨天
4
0
XML

学习目标  能够说出XML的作用  能够编写XML文档声明  能够编写符合语法的XML  能够通过DTD约束编写XML文档  能够通过Schema约束编写XML文档  能够通过Dom4j解析XML文档 第1章 xm...

stars永恒
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部