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实现radio第一次点击选中第二次点击取消功能
May 15 jQuery
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
jquery.uploadView 实现图片预览上传功能
Aug 10 jQuery
jQuery选择器之属性过滤选择器详解
Sep 28 jQuery
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 jQuery
jquery实现的简单轮播图功能【适合新手】
Aug 17 jQuery
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 jQuery
jquery分页插件pagination使用教程
Oct 23 jQuery
使vue实现jQuery调用的两种方法
May 12 jQuery
jquery实现的分页显示功能示例
Aug 23 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加速器eAccelerator的配置参数、API详解
2014/05/05 PHP
php禁止直接从浏览器输入地址访问.php文件的方法
2014/11/04 PHP
php类的自动加载操作实例详解
2016/09/28 PHP
PHP实现的pdo连接数据库并插入数据功能简单示例
2019/03/30 PHP
Yii框架的路由配置方法分析
2019/09/09 PHP
使用jQuery模板来展现json数据的代码
2010/10/22 Javascript
javascript的函数、创建对象、封装、属性和方法、继承
2011/03/10 Javascript
jQuery实现渐变弹出层和弹出菜单的方法
2015/02/20 Javascript
jQuery 回调函数(callback)的使用和基础
2015/02/26 Javascript
JavaScript驾驭网页-DOM
2016/03/24 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
2017/01/11 Javascript
JavaScript正则表达式简单实用实例
2017/06/23 Javascript
浅谈vue+webpack项目调试方法步骤
2017/09/11 Javascript
Vue项目使用CDN优化首屏加载问题
2018/04/01 Javascript
原生JS检测CSS3动画是否结束的方法详解
2019/01/27 Javascript
微信小程序接入腾讯云验证码的方法步骤
2020/01/07 Javascript
[56:35]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第一局
2016/03/06 DOTA
python使用xlrd实现检索excel中某列含有指定字符串记录的方法
2015/05/09 Python
浅谈python中的面向对象和类的基本语法
2016/06/13 Python
Python处理XML格式数据的方法详解
2017/03/21 Python
利用Tkinter和matplotlib两种方式画饼状图的实例
2017/11/06 Python
python实现可视化动态CPU性能监控
2018/06/21 Python
解决django前后端分离csrf验证的问题
2019/02/03 Python
Python爬虫教程知识点总结
2020/10/19 Python
英国和爱尔兰最大的地毯零售商:Kukoon
2018/12/17 全球购物
Flesh Beauty官网:露华浓集团旗下彩妆品牌
2021/02/15 全球购物
90后毕业生的求职信范文
2013/09/21 职场文书
党支部书记岗位责任制
2014/02/11 职场文书
小学家长评语大全
2014/04/16 职场文书
匿名检举信范文
2015/03/02 职场文书
司机个人年终总结
2015/03/03 职场文书
2016年小学端午节活动总结
2016/04/01 职场文书
Python使用sql语句对mysql数据库多条件模糊查询的思路详解
2021/04/12 Python
python实现简易自习室座位预约系统
2021/06/30 Python
详解MindSpore自定义模型损失函数
2021/06/30 Python
简单且有用的Python数据分析和机器学习代码
2021/07/02 Python