实现一个弹幕墙APP

弹幕墙APP点这里

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

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

结构和样式很简单:

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

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

1
2
3
4
5
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;

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

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

1
2
3
4
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

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

最重要的 功能

1
2
3
4
5
6
7
//创建数据库引用
var config = {
authDomain: "sxydanmu.wilddog.com",
syncURL: "https://sxydanmu.wilddogio.com"
};
wilddog.initializeApp(config);
var ref = wilddog.sync().ref();
1
2
3
4
5
6
//发射按钮事件
$("#shut").click(function() {
var text = $(".s_txt").val();//获取输入框文字
ref.child('message').push(text);// 将数据写到云端 message 节点下,child 用来定位子节点
$(".s_txt").val('');//清空输入框
});
1
2
3
4
5
6
//清空按钮事件
$("#clc").click(function() {
ref.remove();//清空云端数据
arr = [];
$(".move").empty();//清空显示框
});
1
2
3
4
5
6
7
8
9
10
// 绑定 '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);
});
1
2
3
4
5
//清屏后清空云端数据,清空本地弹幕
ref.on('child_removed', function(snapshot) {
arr = [];
$(".show").empty();
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//弹幕滚动及逐条显示
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();
});
}
1
2
3
4
5
6
7
8
9
10
//在屏幕上输出弹幕
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);
}
1
2
3
4
5
6
//随机颜色函数
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方便的多。不过我觉得我还是喜欢写原生的(我是不是有病)

努力<br><br>希望能成为一名前端工程师<br>加油