jquery实现直播视频弹幕效果

发布时间：2020-10-05 05:35:33 作者：藏色散人
来源：脚本之家阅读：172

JQ实现弹幕效果，快来吐糟你的想法吧

jquery实现直播视频弹幕效果

代码如下，复制即可使用：

<!DOCTYPE html>

<html>

 <head>

  <meta charset="utf-8" />

  <title>JQ实现弹幕效果</title>

  <style type="text/css">

   *{

    padding: 0;

    margin: 0;

   }

   #box{

    height:700px;

    width:1000px;

    margin: 0 auto;

    border:1px solid #000000;

    position: relative;

   }

   #main{

    width:100%;

    height:605px;

    position: relative;

    overflow: hidden;

   }

   p{

    position: absolute;

    left:1000px;

    width:200px;

    top:0;

   }

   #bottom{

    width:100%;

    height:80px;

    background: #ABCDEF;

    text-align: center;

    padding-top: 15px;

    position: absolute;

    left: 0;

    bottom: 0;

   }

   #txt{

    width:300px;

    height:50px; 

   }

   #btn{

    width:100px;

    height:50px;    

   }

  </style>

 </head>

 <body>

  <div id="box">

   <div id="main">

     

   </div>

   <div id="bottom">

    <input type="text" id="txt" placeholder="请输入内容" />

    <input type="button" id="btn" value="发射" />

   </div>

  </div>

  <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>

  <script type="text/javascript">

   $(function(){

    var pageH=parseInt($("#main").height());

    var colorArr=["#cfaf12","#12af01","#981234","#adefsa","#db6be4","#f5264c","#d34a74"];    

    $("#btn").bind("click",auto);

    document.onkeydown=function(e){

     if(e.keyCode == 13){

      auto();

     }

    };

    function auto(){

     var $value = $("#txt").val();

     $("#main").append("<p>" + $value + "</p>");

     $("#txt").val("");

     var _top=parseInt(pageH*(Math.random()));

     var num=parseInt(colorArr.length*(Math.random()));

     $("p:last-child").css({"top":_top,"color":colorArr[num],"font-size":"20px"});

     $("p:last-child").animate({"left":"-200px"},10000);

     $("p:last-child").stop().animate({"left":"-300px"},10000,"linear",function(){

      $(this).remove();

     });    

     //console.log($value);

    };

     

   })

  </script>

 </body>

</html>

实例扩展：

<!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">发射</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+")";
  }
  //定义数组保存弹幕
  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();
    });
  }
  //点击创建弹幕
  $("#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);//将新的弹幕添加到数组内容的前面
    //添加弹幕列表
    $("<p></p>").text(txt.val()).css("color",randomColor()).prependTo($(".list-info"));
    txt.val("");//清空文本框
    //自动跑起来
    clearInterval(tm);
    index=saveDan.length-1
    tm=setInterval(autoAnimate,1000);
  });
  //enter键确认发送
  $(document).keydown(function (e) {
    var e=e||window.event;
    e.keyCode==13 && ($("#btn").click());
  });
</script>
</body>
</html>

到此这篇关于jquery实现直播视频弹幕效果的文章就介绍到这了,更多相关JQ实现弹幕效果内容请搜索亿速云以前的文章或继续浏览下面的相关文章希望大家以后多多支持亿速云！

jquery实现直播视频弹幕效果

相关阅读