功能：发射弹幕，清空弹幕，实现弹幕动画
1，结构HTML；
<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="index.css" />
<!--引入JQ，野狗云sdk-->
<script src="js/jquery-1.11.1.js"></script> <script src = "https://cdn.wilddog.com/js/client/current/wilddog.js"></script> <script src="js/dm.js"></script> </head> <body> <div class="dm"> <!-- 上部分 --> <div class="dm_screen"> <div class="dm_mask"></div> <div class="dm_show"></div> </div> <div class="send"> <div class="s_filter"> <div class="s_con"> <p> <input placeholder="说点什么?" class="s_txt" type="text" /> </p> <p> <input type="button" value="发 射" class="s_sub" /> <input type="button" value="清 屏" class="s_del" /> </p> </div> </div> </div> </div> </body> </html>
实现弹幕功能需要使用到野狗云来储存数据
在www.wildog.com 注册一个账号，创建一个应用 引用：
var ref = new Wilddog("https://[appId].wilddogio.com/");
第一步将数据提交到野狗云
$('.s_sub').click(function(){
//获取输入框文字
var text = $('.s_txt').val();
//将数据写到云端message节点下，child定位子节点
ref.child('message').push('text');
//清空输入栏
$('.s_txt').val('');
});
第二步响应按键点击，即在点击Enter按键的时候会触发事件，将数据提交到野狗云，Enter的按键对应的是13
trigger() 方法触发被选元素的指定事件类型。
//响应按键点击事件 $('.s_txt').keypress(function(){ if(event.keyCode == "13"){ $('.s_sub').trigger('click'); } });
清除按钮，即点击之后弹幕墙的内容会清空
- remove() - 删除被选元素（及其子元素）
- empty() - 从被选元素中删除子元素
//按键清除事件 $('.s_del').click(function(){ ref.remove(); arr = []; $('.s_show').empty(); });
第四步：监听云端数据变更，云端数据变化，弹幕框里数据也跟着变化。
事件监听是指通过事件触发的方式来获取云端变化的数据。通过监听云端事件，本地获取并处理数据，保持和数据实时同步。
我们需要用到的是child_added与on() 方法配合 （on（）用于与事件配合来监听指定节点的数据。）更多详情
https://docs.wilddog.com/sync/Web/guide/retrieve-data.html
ref.child('message').on('child_added' , function(snapshot){
var text = snapshot.value;
arr.push(text);
var textObj = $("<div class="dm_message"></div>");
textObj.text(text);
$('.s_show').append(textObj);
moveObj(textObj);
});
//
ref.on('child_removed',function(){
arr = [];
$('.s_show').empty();
});
});
按照时间显示弹幕内容
var topMin = $('.dm_mask').offset().top;//显示框距离顶部的距离 var topMax = topMin+$('.dm_mask').height();//底部距离顶部的距离 var _top = topMin; // 每个滚动消息距顶部距离 var moveObj = function(obj){ var _left = $('.dm_mask').width()-obj.width(); _top = _top + 50; if(_top > (topMax - 50)) { _top = topMin; } obj.css({ left: _left, top: _top, color: getRandomColor() }); var time = 20000+10000*Math.random(); obj.animate({ left:'-'+_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 getRandomColor = function(){ return '#'+Math.floor(Math.random()*16777215).toString(16); } */
//在屏幕上输出
var getAndRun = function() { if (arr.length > 0) { var n = Math.floor(Math.random() * arr.length + 1) - 1; var textObj = $("<div>" + arr[n] + "</div>"); $(".dm_show").append(textObj); moveObj(textObj); } setTimeout(getAndRun, 3000); }