文档章节

js弹幕

JohanZ
 JohanZ
发布于 2015/04/02 10:50
字数 243
阅读 84
收藏 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>


© 著作权归作者所有

共有 人打赏支持
JohanZ
粉丝 1
博文 27
码字总数 7696
作品 0
福州
技术主管
加载中

评论(1)

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

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

yuxiaoliang
07/11
0
0
js调用父框架函数与弹窗调用父页面函数的方法_站长帮帮网-asp.net教程-flash as3教程

js调用父框架函数与弹窗调用父页面函数的方法 时间:2009-07-26 13:50来源: 作者: 点击: 297次 js调用父框架函数与弹窗调用父页面函数的简单代码 - JavaScript js弹窗页面后调用父页面函数 (例...

薛向阳
2010/06/23
0
0
jQuery zxxbox弹出框插件(v3.0)测试页面

源文件下载.zip 16.6k 一、内置弹框 显示最简单的内置的信息确定提示框:点击我 $("#test1").click(function(){ $.zxxbox.remind("你已成功受邀参加威尼斯电影节。"); }); 带回调函数的信息确...

mickelfeng
2013/01/07
0
0
前端将数据转化为弹幕效果的实现方式

前言 这个需求如题,大体上是将文章的评论数据,在文章的首图上面以弹幕的形式出现。当时在做这个需求的时候,花了挺多精力的,踩了很多坑,现将弹幕的实现思路写出来,如果喜欢的话可以点波...

OBKoro1
05/02
0
0
浅谈WKWebView使用、JS的交互

前言 WKWebView是iOS8 出来的浏览器控件,用来取代UIWebView.对于WKWebView与UIWebView的对比特点,这里就不过多的叙述,都算是老生常谈的问题了,网上的说明也很多.近来在做Web端,需要植入移动端...

神经骚栋
07/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

你为什么在Redis里读到了本应过期的数据

一个事故的故事 晚上睡的正香突然被电话吵醒,对面是开发焦急的声音:我们的程序在访问redis的时候读到了本应过期的key导致整个业务逻辑出了问题,需要马上解决。 看到这里你可能会想:这是不...

IT--小哥
今天
2
0
祝大家节日快乐,阖家幸福! centos GnuTLS 漏洞

yum update -y gnutls 修复了GnuTLS 漏洞。更新到最新 gnutls.x86_64 0:2.12.23-22.el6 版本

yizhichao
昨天
5
0
Scrapy 1.5.0之选择器

构造选择器 Scrapy选择器是通过文本(Text)或 TextResponse 对象构造的 Selector 类的实例。 它根据输入类型自动选择最佳的解析规则(XML vs HTML): >>> from scrapy.selector import Sele...

Eappo_Geng
昨天
4
0
Windows下Git多账号配置,同一电脑多个ssh-key的管理

Windows下Git多账号配置,同一电脑多个ssh-key的管理   这一篇文章是对上一篇文章《Git-TortoiseGit完整配置流程》的拓展,所以需要对上一篇文章有所了解,当然直接往下看也可以,其中也有...

morpheusWB
昨天
5
0
中秋快乐!!!

HiBlock
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部