小編給大家分享一下jquery如何實現(xiàn)直播彈幕效果，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設,利辛企業(yè)網(wǎng)站建設,利辛品牌網(wǎng)站建設,網(wǎng)站定制,利辛網(wǎng)站建設報價,網(wǎng)絡營銷,網(wǎng)絡優(yōu)化,利辛網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

本文實例為大家分享了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)的展示出來

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

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