jquery实现直播视频弹幕效果


Posted in jQuery onFebruary 25, 2020

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 相关文章推荐
基于jQuery实现文字打印动态效果
Apr 21 jQuery
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 jQuery
jquery append与appendTo方法比较
May 24 jQuery
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 jQuery
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 jQuery
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 jQuery
jquery制作的移动端购物车效果完整示例
Feb 24 jQuery
jquery插件实现悬浮的菜单
Apr 24 jQuery
jquery制作的移动端购物车效果完整示例
Feb 24 #jQuery
jquery实现的放大镜效果示例
Feb 24 #jQuery
jquery向后台提交数组的代码分析
Feb 20 #jQuery
jquery实现垂直手风琴导航栏
Feb 18 #jQuery
jQuery表单校验插件validator使用方法详解
Feb 18 #jQuery
jquery传参及获取方式(两种方式)
Feb 13 #jQuery
jQuery实现简易QQ聊天框
Feb 10 #jQuery
You might like
php小偷相关截取函数备忘
2010/11/28 PHP
两级联动select刷新后其值保持不变的实现方法
2014/01/27 PHP
PHP中empty和isset对于参数结构的判断及empty()和isset()的区别
2015/11/15 PHP
PHP实现电商订单自动确认收货redis队列
2017/05/17 PHP
JavaScript中的Math 使用介绍
2014/04/21 Javascript
JS截取url中问号后面参数的值信息
2014/04/29 Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
2014/10/21 Javascript
SuperSlide标签切换、焦点图多种组合插件
2015/03/14 Javascript
jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码
2015/10/30 Javascript
使用JQuery实现的分页插件分享
2015/11/05 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
2020/04/20 Javascript
jquery中实现时间戳与日期相互转换
2016/04/12 Javascript
Javascript基础_简单比较undefined和null 值
2016/06/14 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
2016/09/19 Javascript
Angular.js中$apply()和$digest()的深入理解
2016/10/13 Javascript
AngularJS自定义指令详解(有分页插件代码)
2017/06/12 Javascript
基于jQuery解决ios10以上版本缩放问题
2017/11/03 jQuery
js实现鼠标单击Tab表单切换效果
2018/05/16 Javascript
Vue2实时监听表单变化的示例讲解
2018/08/30 Javascript
jQuery实现聊天对话框
2020/02/08 jQuery
基于vue的tab-list类目切换商品列表组件的示例代码
2020/02/14 Javascript
Javascript组合继承方法代码实例解析
2020/04/02 Javascript
[04:30]显微镜下的DOTA2第五期——拉比克
2013/09/26 DOTA
Python对文件操作知识汇总
2016/05/15 Python
python读取图片并修改格式与大小的方法
2018/07/24 Python
Python函数any()和all()的用法及区别介绍
2018/09/14 Python
用Python将Excel数据导入到SQL Server的例子
2019/08/24 Python
沪江旗下的海量优质课程平台:沪江网校
2017/11/07 全球购物
Banana Republic欧盟:美国都市简约风格的代表品牌
2018/05/09 全球购物
澳大利亚儿童精品仓库:Goo & Co.
2019/06/20 全球购物
应用化学专业本科生求职信
2013/09/29 职场文书
2014年党员公开承诺践诺书
2014/03/25 职场文书
中华魂放飞梦想演讲稿
2014/08/26 职场文书
黑白记忆观后感
2015/06/18 职场文书
嵌入式Redis服务器在Spring Boot测试中的使用教程
2021/07/21 Redis
基于Python编写简易版的天天跑酷游戏的示例代码
2022/03/23 Python