利用javascript实现一个弹幕墙,页面包括一个显示墙,字幕输入框,发射弹幕按钮,关闭弹幕按钮,通过jquery自定义实现弹幕用到的函数。
在线演示地址为: Design a danmu app
下面来看一下代码分析:
HTML部分主要实现页面的布局: index.html
<!DOCTYPE html>
<html>
<head>
<title>Design a danmu app</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="./css/main.css">
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/main.js"></script>
<script>
$(document).ready(function(){
$('.send').click(function(){
$.bulletScreen.send($('#bullet-text').val(),$('.container'));
$('#bullet-text').val("");
});
$('.close').click(function(){
$.bulletScreen.clear($('.container'));
});
$('#bullet-text').keyup(function(e){
if(e.keyCode==13){
$.bulletScreen.send($('#bullet-text').val(),$('.container'));
$('#bullet-text').val("");
}
});
});
</script>
</head>
<body>
<div class="container">
</div>
<div class="menu-bar">
<input class="input" type="text" placeholder="说点什么吧" id="bullet-text"/>
<span class="btn send">发送弹幕</span>
<span class="btn close">关闭弹幕</span>
</div>
</body>
</html>
通过CSS对页面进行简单的布局设计: main.css
.container{
width: 1000px;
margin: 10px auto;
background: #e8e8e8;
height: 500px;
border-radius: 5px;
border: 3px solid #ddd;
position: relative;
overflow: hidden;
}
.menu-bar{
width: 1000px;
margin: 0px auto;
text-align: center;
}
.btn{
padding: 5px 20px;
display: inline-block;
border-radius: 5px;
border: 1px solid #e0e0e0;
margin: 15px;
background: #37a;
color: #fff;
cursor: pointer;
}
#bullet-text{
width: 280px;
font-size: 18px;
padding-left: 20px;
}
用jquery封装自定义的函数: main.js
(function($){
$.bulletScreen={
timers:[],
add:function(val,container){
var odiv = $("<div class='bullet'></div>");
odiv.text(val);
odiv.css({
position:'absolute',
fontSize:'20px',
display:'block',
whiteSpace:'nowrap'
});
var r = this.colors();
var g = this.colors();
var b = this.colors();
odiv.css({
color: "rgb(" + r + "," + g + "," + b + ")",
top: (Math.floor(Math.random() * (container.height()-20))) + "px",
width:odiv.width(),
right: 0
});
container.append(odiv);
this.move(odiv,container);
},
colors:function(){
return Math.floor(Math.random() * 255);
},
send:function(val,container){
this.add(val,container);
},
move:function(odiv,container){
var i = 0;
var timer = setInterval(function() {
odiv.css({
right: (i += 1) + "px"
});
if ((odiv.offset().left + odiv.width()) < container.offset().left) {
i=0;
odiv.css({
right: (i += Math.floor(Math.random())) + "px"
});
}
}, 10);
this.timers.push(timer);
},
clear:function(container){
for (var i = 0; i < this.timers.length; i++) {
clearInterval(this.timers[i])
}
container.find('.bullet').remove();
}
}
})(jQuery);