布局部分：

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

 

版权声明：本文为weilingfamily原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/weilingfamily/p/9070813.html