点击 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‘);
- }
- });
清除按钮,即点击之后弹幕墙的内容会清空
- //按键清除事件
- $(‘.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
来源: http://www.bubuko.com/infodetail-2338235.html