实现一个弹幕墙APP

弹幕墙APP点这里

功能: 实现发射弹幕、清除弹幕、显示弹幕功能。
扩展: 用野狗实时后端云来存储弹幕数据。

按照 : 结构-->样式-->功能-->存储进行开发

结构和样式很简单：

这里注意由于要实现弹幕滚动要用到绝对定位，然后动态改变弹幕 left 的值。这里用到绝对定位元素的居中。

由于绝对定位脱离了文档流，所以用 text-align:center 和 margin: 0 auto实现不了水平居中，这里要用到一种比较暴力的方法

position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;

就是使其既向上也向下，既向上又向下。这样它就不知所措，所以就乖乖的呆在中间了233

还有一种方法，用到css3的 transform 方法

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

就是先相对于父元素偏移50%，再使自己相对于自己移动50%。不知道为什么这种方法我没实现。

最重要的功能

//创建数据库引用
var config = {
    authDomain: "sxydanmu.wilddog.com",
    syncURL: "https://sxydanmu.wilddogio.com"
  };
  wilddog.initializeApp(config);
  var ref = wilddog.sync().ref();

//发射按钮事件
  $("#shut").click(function() {
    var text = $(".s_txt").val();//获取输入框文字
    ref.child('message').push(text);// 将数据写到云端 message 节点下，child 用来定位子节点
    $(".s_txt").val('');//清空输入框
  });

//清空按钮事件
  $("#clc").click(function() {
    ref.remove();//清空云端数据
    arr = [];
    $(".move").empty();//清空显示框
  });

// 绑定 'child_added' 事件，当 message 节点下有子节点新增时，就会触发回调，回调的 `snapshot` 对象包含了新增的数据
  ref.child('message').on('child_added', function(snapshot) {
    var text = snapshot.val();
    arr.push(text);
    var textObj = $("<div></div>");
    textObj.text(text);
    $(".move").append(textObj);
    moveObj(textObj);
    console.log(text);
  });

//清屏后清空云端数据，清空本地弹幕
  ref.on('child_removed', function(snapshot) {
    arr = [];
    $(".show").empty();
  });

//弹幕滚动及逐条显示
var topMin = $('.message').offset().top;     // 显示框距顶部距离
  var topMax = topMin + $('.message').height(); // 显示框底部距顶部距离
  var _top = topMin; // 每个滚动消息距顶部距离
  var moveObj = function(obj) {
    var _left = $('.message').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();
    // animate() 方法执行 CSS 属性集的自定义动画。逐渐改变的，这样就可以创建动画效果。
    obj.animate({
        left : "-" + _left + "px"  // 让消息距左距离逐渐减小，产生右向左滚动动画。
    }, time, function() {
        obj.remove();
    });
  }

//在屏幕上输出弹幕
  var getAndRun = function() { //弹幕输出
    if (arr.length > 0) {
        var n = Math.floor(Math.random() * arr.length + 1) - 1;
        var textObj = $("<div>" + arr[n] + "</div>");
        $(".move").append(textObj);
        moveObj(textObj);
    }
    setTimeout(getAndRun, 3000);
  }

//随机颜色函数
var getRandomColor = function() {//随机颜色函数
    return '#' + (function(h) {
        return new Array(7 - h.length).join("0") + h
    })((Math.random() * 0x1000000 << 0).toString(16))
  }

大致就是这么多了，其实照着文档写倒也没花太多功夫。

写了这个弹幕APP，让我学会了写JQuery，之前一直写原生的JS，果然JQuery方便的多。不过我觉得我还是喜欢写原生的（我是不是有病）

css3动画这方面需要了解，有空要看看，其他倒没有什么大问题了

实现一个弹幕墙APP

弹幕墙APP点这里

推荐阅读更多精彩内容