弹幕是一个很常见的功能，下面是本人封装的一个小小的实现方案，存在不足之处可以提出来或自由改进。
直接上代码：复制可运行
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<meta name="full-screen" content="yes">
<meta name="browsermode" content="application">
<meta name="full-screen" content="yes">
<meta name="browsermode" content="application">
<meta name="x5-orientation" content="portrait">
<title>js实现弹幕title>
<style>
html,body{
position: relative;
width: 100%;
max-width: 750px;
margin: auto;
height: 100%;
background: #fff;
overflow: hidden;
font-family: SimSun,arial;
}
.tmBox{
width: 100%;
height: 16rem;
background: #5e907b;
position: relative;
}
.btn{
display: block;
margin: auto;
margin-top: 20px;
width: 100px;
height: 40px;
outline: none;
}
.tmItem{
position: absolute;
width: auto;
height: auto;
padding:4px;
}
.tmItem.runTm{
animation: runTmEfe 4s linear 0s 1 alternate;
animation-fill-mode: backwards;
}
@keyframes runTmEfe{
from{transform: translateX(18.75rem);}
to{transform: translateX(-100%);}
}
style>
head>
<body>
<div class="tmBox">
div>
<button class="btn start">开启弹幕button>
<button class="btn stop">停止弹幕button>
<button class="btn pause">暂停画面button>
<button class="btn resume">恢复弹幕button>
<button class="btn send">发射弹幕button>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.js" >script>
<script>
//根字体设置
function setHtmlFontSize(){
var w = document.documentElement.clientWidth;
if(w > 750){
w = 750;
}
var fz = w * 20 / 375;
document.getElementsByTagName('html')[0].style.fontSize = fz + 'px';
}
//实时根据屏宽来适应字体
setHtmlFontSize();
window.onresize = function(){
setHtmlFontSize();
}
//获取不重复随机数列
function getOrder(start, end){
var len = end - start + 1;
var myorder = new Array();
var index = 0;
while (index < len) {
var flag = true;
var num = parseInt(Math.floor(Math.random() * len) + start);
for (var i = 0; i < myorder.length; i++) {
if (myorder[i] == num) {
flag = false;
break;
}
}
if (flag) {
myorder[index] = num;
index++;
}
}
return myorder;
}
//弹幕的设置
var tmEntity={
//弹幕内容
tmList:[
'测试弹幕01',
'测试弹幕02',
'测试弹幕03',
'测试弹幕04',
'测试弹幕05',
'测试弹幕06',
'测试弹幕07',
'测试弹幕08',
'测试弹幕09',
'测试弹幕10'
],
//弹幕列表上限
tmMaxLines:10,
//弹幕行数
tmRows:10,
//初始弹幕索引
initIndex:0,
//弹幕过度时间 s
tmTranstionTime:0.4,
//屏幕宽度
swidth:document.documentElement.clientWidth,
//弹幕循环
isRunTm:true,
//弹幕父容器class
tmFatherClass:".tmBox",
//弹幕class
tmClass:".tmItem",
//弹幕高度
tmHeight:$(".tmBox").height() / 10,
//屏中最低弹幕数
screenTmNum:7
}
console.log(tmEntity);
var rowsOrder=getOrder(0,tmEntity.tmRows-1);
var timeOrder=getOrder(0,tmEntity.tmRows-1);
//添加弹幕
function addTm(item,i,max){
var obj=".','')+" runTm' style='transform: translateX("+tmEntity.swidth+"px);animation-delay:"+(timeOrder[timeOrder.length-1]*tmEntity.tmTranstionTime)+"s;top:"+(rowsOrder[rowsOrder.length-1] * tmEntity.tmHeight)+"px'>"+item+"";
$(tmEntity.tmFatherClass).append(obj);
//addListenerStart($(tmEntity.tmClass).eq(tmEntity.initIndex));
addListenerEnd($(tmEntity.tmClass).eq(tmEntity.initIndex));
tmEntity.initIndex++;
//校验行
rowsOrder.pop();
if(rowsOrder.length==0){
rowsOrder=getOrder(0,tmEntity.tmRows-1);
}
timeOrder.pop();
if(timeOrder.length==0){
timeOrder=getOrder(0,tmEntity.tmRows-1);
}
}
function addListenerEnd(el){
el.on("animationend webkitAnimationEnd", function(){
el.remove();
tmEntity.initIndex--;
if(tmEntity.isRunTm && $(tmEntity.tmFatherClass+" "+tmEntity.tmClass).length <= tmEntity.screenTmNum){
initTm(tmEntity.tmList);
}
});
}
function addListenerStart(el){
el.on("animationstart webkitAnimationStart", function(){
});
}
function initTm(list){
for(var i=0;i<list.length;i++){
addTm(list[i],i,list.length);
}
}
//开始弹幕
function startTmRun(){
initTm(tmEntity.tmList);
tmEntity.isRunTm = true;
}
//停止产生弹幕
function stopTmRun(){
tmEntity.isRunTm = false;
}
//暂停弹幕
function pauseTmScreen(){
$(tmEntity.tmClass).css({"WebkitAnimationPlayState":"paused","AnimationPlayState":"paused"});
}
//继续弹幕
function resumeTmScreen(){
$(tmEntity.tmClass).css({"WebkitAnimationPlayState":"running","AnimationPlayState":"running"});
}
//发射单条弹幕
function sendTm(str){
var str=str+(Math.floor(Math.random()*(tmEntity.tmMaxLines-1+1)+1));
tmEntity.tmList.push(str);
if(tmEntity.tmList.length > tmEntity.tmMaxLines){
tmEntity.tmList.splice(0,tmEntity.tmList.length-tmEntity.tmMaxLines);
console.log(tmEntity.tmList);
console.log(tmEntity.tmList.length);
}
}
$(".btn.start").click(function(){
startTmRun();
})
$(".btn.pause").click(function(){
pauseTmScreen();
})
$(".btn.resume").click(function(){
resumeTmScreen();
})
$(".btn.stop").click(function(){
stopTmRun();
})
$(".btn.send").click(function(){
sendTm("最帅的南哥");
})
script>
body>
html>
效果如图：
点击开启弹幕按钮：
