js弹幕
博客专区 > JohanZ 的博客 > 博客详情
js弹幕
JohanZ 发表于3年前
js弹幕
  • 发表于 3年前
  • 阅读 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>


共有 人打赏支持
粉丝 1
博文 9
码字总数 6808
评论 (1)
maomao-1
弹幕除了楼主所演示的动态效果外,还有一个非常重要的一个实现,那就是如何实现其他人可以收到你的弹幕,怎样做到实时。
就此,我在这里做个补充,希望对大家有用。要实现实时推送与接收,那么就涉及到了另一个技术点web实时消息推送, 以往大家都基本上是用ajax,轮询来自己实现,但是这样做有个缺陷那就是非常浪费客户端资源增加服务器端的负担。个人推荐使用第三方推送服务,例如 goeasy推送就是个非常简单稳定的服务。
实现了实时推送,那么整个弹幕功能就更完整了。
×
JohanZ
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: