實現一個彈幕app
阿新 • • 發佈：2017-10-06
點擊 div guide on() 及其 一個 floor return anim
功能：發射彈幕，清空彈幕，實現彈幕動畫
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); }
實現一個彈幕app