文档章节

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>


© 著作权归作者所有

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

评论(1)

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

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

yuxiaoliang
07/11
0
0
java+html实现弹幕功能并集成敏感词过滤功能,实现思路

即时评论和即时弹幕功能架构设计: 后端数据存储 前端弹幕展示方式 前后台即时通讯方式 敏感词过滤系统 数据存储 弹幕数据庞大,一般是无用数据,存储的话纯文本就行,结构化要求不强,数据不...

两毛五哥哥
2017/11/16
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
10/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

JAVA设计模式之模板方法模式和建造者模式

一、前期回顾 上一篇《Java 设计模式之工厂方法模式与抽象工厂模式》介绍了三种工厂模式,分别是工厂方法模式,简单工厂方法模式,抽象工厂模式,文中详细根据实际场景介绍了三种模式的定义,...

木木匠
23分钟前
2
0
C中的宏的使用(宏嵌套/宏展开/可变参数宏)

基本原则: 在展开当前宏函数时,如果形参有#或##则不进行宏参数的展开,否则先展开宏参数,再展开当前宏。 #是在定义两边加上双引号 #define _TOSTR(s) #sprintf(_TOSTR(test ABC))pr...

SamXIAO
53分钟前
2
0
SpringBoot 整合异步调用方法

1. 在 SpringBoot 主类上使用 @EnableAsync 注解,开启异步调用功能 package com.codingos.springbootdemo;import org.springframework.boot.SpringApplication;import org.springfra......

北漂的我
今天
1
0
0015-如何使用Sentry管理Hive外部表权限

1.文档编写目的 本文档主要讲述如何使用Sentry对Hive外部表权限管理,并基于以下假设: 1.操作系统版本:RedHat6.5 2.CM版本:CM 5.11.1 3.集群已启用Kerberos和Sentry 4.采用具有sudo权限的...

Hadoop实操
今天
3
0
边缘计算与数据中心的发展趋势

导读 Gartner研究表明,人工智能、物联网和5G助力下一代商业创新,由此产生大量数据,2020年前企业将使用超过75亿台联网设备。 在几乎每个方面,社会的节奏都正变得更快。我们希望客户服务问...

问题终结者
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部