思路
1.页面
一个弹幕墙容器接收弹幕
一个文本框输入弹幕
一个发送按钮 一个清屏按钮
2.写jquery插件，提供以下方法
send:function(val,container){ //val弹幕值，container弹幕墙容器
//暴露给外层调用的方法
}
add:function(){
//用于创建弹幕, 设置样式（绝对定位，随机颜色），并添加到容器右侧
}
move:function(){
//定时改变弹幕的位置（right+1）,到达左侧时清除弹幕，清除定时任务
}
clear:function(){
//清除弹幕墙上的所有弹幕
}
代码
1.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>bullet-screen</title>
<link rel="stylesheet" href="bullet_screen.css"/>
<script src="jquery-1.9.1.min.js"></script>
<script src="bullet-screen.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 type="text" placeholder="弹幕内容" id="bullet-text"/>
<span class="btn send">发送弹幕</span>
<span class="btn close">关闭弹幕</span>
</div>
</body>
</html>
2.css
.container{
width: 1000px;
margin: 100px auto;
background: #e8e8e8;
height: 500px;
border-radius: 5px;
border: 1px 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: 3px;
border: 1px solid #e0e0e0;
margin: 15px;
background: #37a;
color: #fff;
cursor: pointer;
}
3.js
(function($){
$.bulletScreen={
timers:[],
add:function(val,container){
var odiv = $("<div class='bullet'></div>");
odiv.html(val);
odiv.css({
position:'absolute',
fontSize:'20px',
display:'block',
whiteSpace:'nowrap'
});
var r = Math.floor(Math.random() * 254);
var g = Math.floor(Math.random() * 254);
var b = Math.floor(Math.random() * 254);
odiv.css({
color: "rgb(" + r + "," + g + "," + b + ")",
top: (Math.floor(Math.random() * container.height())-24) + "px",
width:odiv.width(),
right: 0
});
container.append(odiv);
this.move(odiv,container);
},
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) {
odiv.remove();
clearInterval(timer)
}
}, 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);
效果
demo.png
