弹幕发射器效果：
html代码：
<script src="js/jquery-1.11.0.min.js"></script> <script src = "https://cdn.wilddog.com/js/client/current/wilddog.js" ></script> rel="stylesheet" href="css/ba.css" /> <script src="js/launcher.js"></script>
发射 清屏
css代码： /*reset*/ body,div,ul,li,dl,dt,dd,ol,p,input,button,textarea,h1,h2,h3,h4{margin:0;padding:0;} img{border:0;} ol,ul,li{list-style:none;} a{text-decoration:none;} /*公共样式*/ body{ font-size:; font-family:; } /*barrage area*/ .bar{ margin:20px; } .bar .screen{ height:380px; width:100%; border:1px solid #777; } .bar .show div{ font-size:20px; line-height: 30px; font-weight: 500; color:#777; position: absolute; top:0; left:0; } /*launcher area*/ .laun{ width:100%; height:200px; text-align: center; } .content{ padding:10px; border:1px solid #777; width:200px; border-radius:3px; } .launcher{ width:70px; background:white; color:red; border:1px solid red; border-radius:3px; padding:5px 10px; } .laun p:nth-child(2){ margin-top:15px; } .reset{ width:70px; background:white; color:deepskyblue; border:1px solid deepskyblue; border-radius:3px; padding:5px 10px; } .laun button{ cursor:pointer; } js代码： /*先将wilddog中应用的url引入，并赋值给变量ref * 声明一个空数组arr放置所有的弹幕内容 * 设置发送弹幕按钮的点击事件 * 每次点击就将弹幕内容放入wilddog数据库中，并且将输入框清空 * 设置回车键点击的事件 * 判断keyCode == 13,若等于则为回车键按下，就执行发射弹幕按钮的点击事件 * 设置清屏按钮的点击事件 * 将ref移出 ？？？？、 * 将arr数组设为空 * 并将屏幕显示区域清空 * * 监视数据库内容是否发生变化 * child_added事件 * 若发生就将增加的数据添加进数组arr * 并且给div.dm_show增加个子元素，子元素中放置弹幕内容 * 并给子元素使用moveObj方法 * child_removed * 若发生将arr设为空，并将弹幕显示区域清屏 * * 定义moveObj方法 * * * * 最后一步： * 设置循环发送弹幕方法getRun * 如果arr(弹幕数量)大于0，就循环随机发送弹幕 * 先随机生成一个弹幕的索引 * 给div.dm_show生成一个子元素div,div中放置弹幕内容 * 然后给该子元素使用moveObj方法 * 再使用setTimeout持续使用该方法 * * 设置动画的帧数 * 使用循环发送弹幕方法getRun */ $(document).ready( function(){ var ref = new Wilddog("https://jzx1995yyjy.wilddogio.com/"); var arr = []; $(".launcher").click(function() { var bar = $(".laun input").val(); ref.child("message").push(bar); $(".laun input").val(''); }); $(".content").keypress(function(event){ if(event.keyCode == '13'){ $(".launcher").trigger('click'); } }); $('.reset').click(function(){ ref.remove(); arr = []; $(".show").empty(); }); //监测 ref.child('message').on('child_added', function(snapshot){ var text = snapshot.val(); arr.push(text); var obj_text = $(' '); obj_text.text(text); $(".show").append(obj_text); moveObj(obj_text); }); // ref.on('child_removed', function(){ // arr = []; // $('.show').empty(); // }); /* * topmin就等于弹幕显示区域的偏移量 * topmax就等于这个偏移量加上弹幕区域的高度 * */ var topmin = $('.screen').offset().top; var topmax = topmin + $('.screen').height(); var obj_top = topmin; var moveObj = function(obj) { var obj_left = $('.screen').width() - obj.width(); obj_top += 50; if((obj_top + 50) > topmax){ obj_top = topmin; } obj.css({ left:obj_left, top:obj_top, color:getRandomColor() }); var time = 20000 + 10000 * Math.random(); obj.animate({ left: "-" + obj_left + "px" }, time, function() { obj.remove(); }); } var getRandomColor = function() { return '#' + (function(h) { return new Array(7 - h.length).join("0") + h })((Math.random() * 0x1000000 << 0).toString(16)) } var getRun = function() { if (arr.length > 0) { var n = Math.floor(Math.random() * arr.length + 1) - 1; var obj_text = $(" " + arr[n] + " "); $(".show").append(obj_text); moveObj(obj_text); } //设定每隔三秒调用一次getRun方法，使放在arr数组中的一个弹幕显示出来 setTimeout(getRun, 3000); } jQuery.fx.interval = 50; getRun(); } );