文档章节

js弹幕

JohanZ
 JohanZ
发布于 2015/04/02 10:50
字数 243
阅读 84
收藏 0
点赞 1
评论 1
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
博文 10
码字总数 7391
作品 0
福州
技术主管
加载中

评论(1)

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

     单例模式两个条件   确保只有一个实例   可以全局访问   适用   适用于弹框的实现,全局缓存   实现单例模式      JavaScript 中的单例模式   因为 JavaScript 是无...

webstack前端栈 ⋅ 05/19 ⋅ 0

前端将数据转化为弹幕效果的实现方式

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

OBKoro1 ⋅ 05/02 ⋅ 0

【翻译】Flask大型教程|第二十章:加点JavaScript魔法

本文翻译自The Flask Mega-Tutorial Part XX: Some JavaScript Magic 这是Flask Mega-Tutorial系列的第二十部分,我将添加一个功能,当你将鼠标悬停在用户的昵称上时,会弹出一个漂亮的窗口。...

一进制 ⋅ 04/18 ⋅ 0

JS单例模式《JavaScript设计模式与开发实践》阅读笔记

此文仅记录本人阅读《JavaScript设计模式与开发实践》这个本时的感受,感谢作者曾探写出这么好的一本书。如有冒犯,如有错误,请联系本人:luogao_lg@sina.com处理。 这一章让我知道了单例模...

RoyLuo ⋅ 05/17 ⋅ 0

关于js的bind牌胶水,了解一下?

前言 今天聊一聊js中的bind方法,主要从三个维度来阐述:why——>what——>how。文章虽经个人多次校验,对语言表述、代码书写等进行了认真审核,但仍免不了有疏漏之处,如若发现,还望指出,...

hanmin ⋅ 05/14 ⋅ 0

由js数组类型判断触发的浪漫思绪

一、前言 众所周知,js是门“动态”、“弱类型”编程语言,这意味着在js中可以很任性的定义变量,任性的同时也意味着需常在开发中对变量做类型判断,曾几何时,对数组变量的类型的判断是件很...

hanmin ⋅ 06/08 ⋅ 0

基于 jQuery 的前端 UI 框架 - LuLu UI

LuLu UI 是一个基于 jQuery,针对 PC 网站,兼容 IE8+ 或 IE7+ 的前端 UI 框架,包含 20+ 静态或动态 UI 组件。 上手简单 lulu整个项目就是提供一些UI组件的JS和CSS,很纯粹的JS和CSS,没有任...

匿名 ⋅ 昨天 ⋅ 0

学习Javascript的8张思维导图

分别归类为:  javascript变量  javascript运算符  javascript数组  javascript流程语句  javascript字符串函数  javascript函数基础  javascript基础DOM操作  javascript正则表达式...

thinkyoung ⋅ 2014/09/23 ⋅ 0

code-rhythm:写了个vscode扩展,让代码更有快感

项目地址 Github - onvno/code-rhythm 原因 写代码本身是件快乐的事情,但开发中总有各种烦恼。 有时候一个很简单的方法,因为不确定传参的形式,不确定返回形式,不确定具体用法,就得翻墙,...

onvno_ ⋅ 06/07 ⋅ 0

iOS下JS与OC互相调用(六)--WKWebView + WebViewJavascriptBridge

iOS下JS与OC互相调用(六)--WKWebView + WebViewJavascriptBridge 转载:原地址 https://www.jianshu.com/p/e951af9e5e74 上一篇文章介绍了UIWebView 如何通过WebViewJavascriptBridge 来实现......

法斗斗 ⋅ 05/11 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

中标麒麟(龙芯版)7.0优盘安装

########################################## 制作U盘安装盘: 1.准备U盘: PMON环境下U盘必须格式化成ext3; 昆仑固件环境下可以格式化成ext3,ext4 2.把整个镜像 xxx.iso 复制到U盘下面 3....

gugudu ⋅ 7分钟前 ⋅ 0

老司机写的大数据建模五步走

本文将尝试来梳理一下数据建模的步骤,以及每一步需要做的工作。 01 第一步:选择模型或自定义模式 这是建模的第一步,我们需要基于业务问题,来决定可以选择哪些可用的模型。 比如,如果要预...

gulf ⋅ 15分钟前 ⋅ 0

PacificA 一致性协议解读

PacificA 的 paper 在 08 年左右发出来的,比 Raft 早了 6,7 年。 在 PacificA 论文中,他们强调该算法使用范围是 LAN (Local Area Network),讲白了就是对跨机房不友好。 不管是 ZAB,Raf...

黑客画家 ⋅ 18分钟前 ⋅ 0

盘符图标个性化

设置自己的专属盘符图标 准备ico格式的图片文件一个,在根目录下创建autorun.inf文件 文件内容 [Autorun]icon=logo.ico 重新启动或者插拔U盘即可看到结果...

阿豪boy ⋅ 18分钟前 ⋅ 0

Windows下QQ聊天记录中图片的默认存放位置

Windows下QQ聊天记录中图片的默认存放位置在设置中是没有说明的。 实测位置在:D:\Documents\Tencent Files\974101467\Image 其中: “974101467”为对应的QQ号; “C2C”为个人之间的聊天图...

临江仙卜算子 ⋅ 24分钟前 ⋅ 0

GC 的三种基本实现方式

参考资料《代码的未来》(作者: [日] 松本行弘)。 由于并非本人原著(我只是个“搬运工“),SO 未经本人允许请尽情转载。 另外个人像说明一下这里所说的GC指泛指垃圾回收机制,而单指Jav...

xixingzhe ⋅ 25分钟前 ⋅ 0

Android双击退出

/** * 菜单、返回键响应 */ @Override public boolean onKeyDown(int keyCode, KeyEvent event) { // TODO Auto-generated method stub if(keyCode......

王先森oO ⋅ 30分钟前 ⋅ 0

idea 整合 vue 启动

刚学习Vue 搭建了一个项目 只能命令启动 Idea里面不会启动 尝试了一下修改启动的配置 如下: 1.首先你要保证你的package.json没有修改过 具体原因没有看 因为我改了这个name的值 就没办法启动...

事儿爹 ⋅ 35分钟前 ⋅ 0

redis在windows环境的后台运行方法

在后台运行,首先需要安装redis服务,命令为 redis-server.exe --service-install redis.windows.conf --loglevel verbose 启动,命令为 redis-server --service-start 停止,命令为 redis-...

程序羊 ⋅ 38分钟前 ⋅ 0

比特币现金开发者提出新的交易订单规则

本周,四位比特币现金的四位开发者和研究员:Joannes Vermorel(Lokad),AmaurySéchet(比特币ABC),Shammah Chancellor(比特币ABC)和Tomas van der Wansem(Bitcrust)共同发表了一篇关...

lpy411 ⋅ 42分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部