弹幕墙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动画这方面需要了解，有空要看看，其他倒没有什么大问题了
