一个弹幕墙

发表于   |   分类于   |  

enter image description here

运行效果

html代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>danmu1</title>
	<link rel="stylesheet" type="text/css" href="css/danmu1.css">
	<script src="https://cdn.wilddog.com/js/client/current/wilddog.js"></script>
    <script src="https://cdn.wilddog.com/js/vendor/jquery-1.11.2.min.js"></script>
    <script src="js/danmu1.js"></script>
</head>
<body>
	<div class="dm">
		<div class="dm_screen">
        </div>
	    <div class="dm_control">
		    <input type="text" class="dm_txt" placeholder="说点什么吧">
		    <br>
		    <input type="button" class="dm_send" value="发射">
		    <input type="button" class="dm_delete" value="清屏">
		</div>
	</div>
</body>
</html>

css代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
body {
	background: url(../img/light.jpg);
	background-size: cover;
}
.dm {
	margin: 30px;
}
.dm .dm_screen {	
	border: 1px solid #D13151;
	width: 100%;
	height: 580px;
	}
.dm_control {
	text-align: center;
}
.dm_control .dm_txt {
	width: 400px;
	height: 45px;
    border: 1px solid #D13151;
    border-radius: 3px;
    margin: 20px;
    padding-left: 10px;
}
.dm_control .dm_send {
	width: 150px;
	height: 40px;
	background-color: white;
	border: 1px solid #58B2DC; 
	border-radius: 3px;
	color: #58B2DC;
	font-size: 17px;
}
.dm_control .dm_delete {
	width: 150px;
	height: 40px;
	background-color: white;
	border: 1px solid #58B2DC; 
	border-radius: 3px;
	color: #58B2DC;
	font-size: 17px;
}
.dm .dm_screen div {
  font-size: 22px;
  line-height: 36px;
  font-weight: 500;
  color: #fff;
  position: absolute;
  left: 0;
  top: 0;
}

js代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
$(document).ready(function() {
var ref = new Wilddog("https://wzc1.wilddogio.com");
var arr = [];
$(".dm_send").click(function(){
	var text = $(".dm_txt").val();
	ref.child("message").push(text);
	$(".dm_txt").val("");
})
$(".dm_txt").keypress(function(event) {
	if(event.keyCode == "13") {
		$(".dm_send").trigger("click");
	}
})
$(".dm_delete").click(function() {
	ref.remove();
	arr = [];
	$(".dm_screen").empty();
})
ref.child('message').on('child_added', function(snapshot) {
	    var text = snapshot.val();
	    arr.push(text);
	    var textObj = $("<div class=\"dm_message\"></div>")
	    textObj.text(text);
	    $(".dm_screen").append(textObj);
	    move(textObj);
	  });
var topMin = $(".dm_screen").offset().top;
var topMax = topMin + $(".dm_screen").height();
var  _top = topMin;
var clientWidth = $(window).width();
var  minLeft = (clientWidth - $(".dm_screen").width())/2;
var move = function(obj) {
	var _left = $(".dm_screen").width() - obj.width();
	    _top = topMin + Math.random()*($(".dm_screen").height()-30);
	obj.css({
		left: _left,
		top: _top,
		color: getRandomColor()
	});
	obj.animate({
		left: minLeft + "px"
	},10000 + Math.random()*5000,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 getAndRun = function() {
    if (arr.length > 0) {
      var n = Math.floor(Math.random() * arr.length + 1) - 1;
      var textObj = $("<div>" + arr[n] + "</div>");
      $(".dm_screen").append(textObj);
      move(textObj);
  }
    setTimeout(getAndRun, 3000);
  }
    getAndRun();
})

运行链接： http://codepen.io/wzc/full/PbmxOo/