网页上添加弹幕

布局部分：

<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
});


barrage.begin();

扫描二维码关注公众号，回复： 977692 查看本文章