jquery實現(xiàn)直播彈幕效果

更新時間：2019年11月28日 11:08:38 作者：一只前端小白

這篇文章主要為大家詳細介紹了jquery實現(xiàn)直播彈幕效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了jquery直播彈幕展示的具體代碼，供大家參考，具體內(nèi)容如下

理論知識：

實現(xiàn)效果主要涉及jq對節(jié)點的操作，以及動畫函數(shù)的使用…

思路：

1.獲取到評論文本框的值，對文本內(nèi)容進行處理

2.動態(tài)創(chuàng)建一條彈幕，將創(chuàng)建的彈幕動態(tài)的添加到需要顯示的頁面，并同時創(chuàng)建一條新的評論消息，動態(tài)添加到評論列表

3.利用數(shù)組將每次添加的彈幕保存起來，使用定時器讓所有的彈幕循環(huán)動態(tài)的展示出來

大體上的思路就是這樣，下面直接貼代碼？

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
    html, body {
      margin: 0px;
      padding: 0px;
      width: 100%;
      height: 100%;
      font-family: "微軟雅黑";
      font-size: 62.5%;
    }

    .boxDom {
      width: 100%;
      height: 100%;
      position: relative;
      overflow: hidden;
    }

    .idDom {
      width: 100%;
      height: 10%;
      background: #666;
      position: fixed;
      bottom: 0px;
    }

    .content {
      display: inline-block;
      width: 460px;
      height: 40px;
      position: absolute;
      left: 0px;
      right: 0px;
      top: 0px;
      bottom: 0px;
      margin: auto;
    }

    .title {
      display: inline;
      font-size: 4em;
      vertical-align: bottom;
      color: #fff;
    }

    .text {
      border: none;
      width: 300px;
      height: 30px;
      border-radius: 5px;
      font-size: 2.4em;
    }

    .btn {
      width: 60px;
      height: 30px;
      background: #f90000;
      border: none;
      color: #fff;
      font-size: 2.4em;
    }

    span {
      height: 40px;
      position: absolute;
      overflow: hidden;
      color: #000;
      font-size: 4em;
      line-height: 1.5em;
      cursor: pointer;
      white-space: nowrap;
    }
    #boxDom video{
      width: 80%;
      height: 90%;
      float: left;
    }
    #boxDom .list-info{
      width: 20%;
      height: 90%;
      float: left;
      background-color: #666;
      overflow-y: auto;
      overflow-x: hidden;
      position: relative;
      z-index: 999;
    }
    .list-info p{
      font-size: 15px;
      line-height: 20px;
      border-bottom: 1px dashed #ccc;
      text-indent: 2em;
      color: #fff;
    }

  </style>
</head>
<body>
<div class="boxDom" id="boxDom">
  <video controls="controls" src="movie/10_2fdd2bbcd15c68497744f07d4527cef2_3.mp4"></video>
  <div class="list-info"> </div>
  <div class="idDom" id="idDom">
    <div class="content">
      <p class="title">吐槽:</p>
      <input type="text" class="text" id="text"/>
      <button type="button" class="btn" id="btn">發(fā)射</button>
    </div>
  </div>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script>
 //生成隨機顏色
  var randomColor=function(){
    var r= Math.floor(Math.random()*257);
    var g= Math.floor(Math.random()*257);
    var b= Math.floor(Math.random()*257);
    return "rgb("+r+","+g+","+b+")";
  }
  //定義數(shù)組保存彈幕
  var saveDan=[],index=0,tm;
  //彈幕自動移動方法
  var autoAnimate=function(){
    index++;
    index>saveDan.length-1 && (index=0);
    saveDan[index].appendTo($("#boxDom")).animate({
      "right":$(document).width(),
    },10000,function () {
      $(this).css("right",$(".list-info").width()-$(this).width()).remove();
    });
  }
  //點擊創(chuàng)建彈幕
  $("#btn").click(function () {
    var txt=$("#text");
    var randomTop=Math.floor(Math.random()*($("#boxDom video").height()-40));
    if(txt.val().trim().length==0)return;
    var span= $("<span></span>").text(txt.val()).css({
      "color":randomColor(),
      "top":randomTop,
      "right":$(".list-info").width(),
      "z-index":888
    });
    saveDan.unshift(span);//將新的彈幕添加到數(shù)組內(nèi)容的前面
    //添加彈幕列表
    $("<p></p>").text(txt.val()).css("color",randomColor()).prependTo($(".list-info"));
    txt.val("");//清空文本框
    //自動跑起來
    clearInterval(tm);
    index=saveDan.length-1
    tm=setInterval(autoAnimate,1000);
  });
  //enter鍵確認發(fā)送
  $(document).keydown(function (e) {
    var e=e||window.event;
    e.keyCode==13 && ($("#btn").click());
  });
</script>
</body>
</html>

最后看看最終的效果圖，模仿直播彈幕完成了