这是一个弹幕

布局部分：

<ul class = "barrage-area"></ul>

---

css部分：

.barrage-area{
font-size:0.28rem;
line-height:2em;
overflow:hidden;
position:relative;
height:10em;
border:1px solid #ccc;
margin:10px;
background-color:#efefef;
list-style: none;
padding: 0px;
}

.barrage-item{
position:absolute;
left:100%;
line-height:2em;
font-size:14px;
padding:0px 1em;
border-radius:100px;
background-color:#ccc;
white-space: nowrap;
}

.barrage-item[data-rank = "0"]{
top:10%;
}
.barrage-item[data-rank = "1"]{
top:40%;
}
.barrage-item[data-rank = "2"]{
top:70%;
}

---

javascript部分

<script src="js/jquery.min.js"></script>
<script src ="barrage.js"></script>

var data1 = [{
"txt" : "这是第一条弹幕这是第一条弹幕这是第一条弹幕"
},{
"txt" : "这是第二条弹幕条弹幕"
},{
"txt" : "这是第三条弹幕这是第三条弹幕"
},{
"txt" : "这是第三条弹幕"
},{
"txt" : "这是第二条弹幕条弹幕"
},{
"txt" : "这是第三条弹幕这是第三条弹幕"
}
];
var barrage = new Barrage({
wrapper : $(".barrage-area").eq(0),
rank : 3,
tmp : function(data,rank){
return '<li class = "barrage-item" data-rank = "'+rank+'">'+data.txt+'</li>';
},

data : data1,//数据
speed : 1.6,//速度
rank : 3,//一共多少行弹幕
circle: Boolean//循环

});


barrage.begin();

此处用的是barrage.js插件实现的弹幕功能，具体参数设置可参照http://www.zhangyunling.com/731.html