基于jQuery实现弹幕效果

效果如下：

HTML：

<div class="dmbg">
<div class="dmHt">
<img src="images/txt01.png">
<span>已有<b>257864</b>人在此寄托了思念</span>
</div>
<div class="dmShow">
<!--<div>祝家乡越来越繁荣昌盛，人们的生活也越来越富裕。</div>
<div>祝家乡人们的生活也越来越富裕。</div>
<div>祝家乡越来越繁荣昌盛越来越富裕。</div>
<div>祝家乡繁荣昌盛越来越富裕。</div>
<div>人们的生活也越来越富裕。</div>-->
</div>
<div class="dmSend">
<input type="text" class="dmInt"/>
<input type="button" value="发布评论" class="dmSub"/>
</div>
</div>

CSS：

.dmbg{background:url(images/bg03.jpg) no-repeat left top;background-size:100% 100%;position:relative;padding:50px 0 30px 0;box-sizing:border-box;overflow:hidden;}
.dmHt{text-align:center;}
.dmHt span{display:block;font-size:30px;padding-top:10px;}
.dmHt span b{color:#cc0000;font-size:36px;display:inline-block;padding:0 20px;}
.itemBg{background:url(images/icon03.png) no-repeat 10px center;padding:10px 20px 10px 65px;border-radius:40px;background-size:40px 40px;font-size:18px;line-height:36px;color:#fff;position:absolute;left:0;top:0;white-space:nowrap;box-sizing:border-box;}
.dmShow{position:relative;height:640px;}
.dmSend{width:100%;display:flex;justify-content:center;align-items:center;margin-top:50px;}
.dmInt{border:2px solid #1064cf;font-size:16px;line-height:38px;width:500px;padding-left:10px;border-radius:5px 0 0 5px;}
.dmSub{background:#1064cf;color:#fff;font-size:16px;border:none;line-height:44px;height:44px;padding:0 20px;border-radius:0 5px 5px 0;}

JS（需引入jQuery）：

//弹幕数据
let dmData = [
  {id:0,text:"祝家乡越来越繁荣昌盛，人们的生活也越来越富裕。"},
  {id:1,text:"祝家乡人们的生活也越来越富裕。"},
  {id:2,text:"祝家乡越来越繁荣昌盛越来越富裕。"},
  {id:3,text:"人们的生活也越来越富裕。"},
  {id:4,text:"人们11111来越富裕。"},
  {id:0,text:"祝家乡越来越繁荣昌盛，人们的生活也越来越富裕。"},
  {id:1,text:"祝家乡人们的生活也越来越富裕。"},
  {id:2,text:"祝家乡越来越繁荣昌盛越来越富裕。"},
  {id:3,text:"人们的生活也越来越富裕。"},
  {id:0,text:"祝家乡越来越繁荣昌盛，人们的生活也越来越富裕。"},
  {id:1,text:"祝家乡人们的生活也越来越富裕。"},
  {id:2,text:"祝家乡越来越繁荣昌盛越来越富裕。"},
  {id:3,text:"人们的生活也越来越富裕。"},
];

//屏幕宽度及屏幕高度
let winH = $(window).height();
let winW = $(window).width();

dmInit();//弹幕数据初始化
dmScroll(); //弹幕滚动

//弹幕数据初始化
function dmInit(){    
  var showBox =$(".dmShow").height()-45;
  for(var x =0;x<dmData.length;x++){
    var text= dmData[x].text;
    var dmTop = Math.floor(Math.random()*showBox);
    var dmLeft = Math.floor(Math.random()*winW);
    var div="<div class='itemBg' style='background-color:"+getReandomColor()+";left:"+dmLeft+"px;top:"+dmTop+"px'>"+text+"</div>";
    $(".dmShow").append(div);
  }  
}
//弹幕数据滚动
function dmScroll (){
  $(".itemBg").show().each(function(){
    var time=Math.floor(Math.random()*20000+10000) ;
    var divLeft = $(this).offset().left
    var dmLeft = Math.floor(Math.random()*winW);
    if(divLeft != winW){
      $(this).animate({left:"-"+winW+"px"},time, dmScroll); 
      $(this).css({left:winW})
    }      
  })
}
//input聚焦清除内容
$(".dmInt").focus(function(){
  $(this).val('');
})
//弹幕提交
$(".dmSub").click(function(){
  var text=$(".dmInt").val();
  var showBox =$(".dmShow").height()-45;
  var dmTop = Math.floor(Math.random()*showBox);
  var dmLeft = Math.floor(Math.random()*winW);
  //数据提交成功后执行
  var div="<div class='itemBg' style='background-color:"+getReandomColor()+";left:"+dmLeft+"px;top:"+dmTop+"px'>"+text+"</div>";
  $(".dmShow").append(div);
})

//弹幕底色随机获取色
function getReandomColor(){
  return '#'+(function(h){
  return new Array(7-h.length).join("0")+h
  })((Math.random()*0x1000000<<0).toString(16))
}