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实现图片放大点击切换
Jun 06 jQuery
jquery仿京东商品放大浏览页面
Jun 06 jQuery
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 jQuery
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 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/02/15 PHP
php设计模式 Builder(建造者模式)
2011/06/26 PHP
php无限极分类实现的两种解决方法
2013/04/28 PHP
Linux下php5.4启动脚本
2014/08/03 PHP
php实现遍历目录并删除指定文件中指定内容
2015/01/21 PHP
百万级别知乎用户数据抓取与分析之PHP开发
2015/09/28 PHP
PHP命名空间简单用法示例
2018/12/28 PHP
使用JavaScript库还是自己写代码?
2010/01/28 Javascript
jquery validator 插件增加日期比较方法
2010/02/21 Javascript
Jquery post传递数组方法实现思路及代码
2013/04/28 Javascript
javascript设计模式之工厂模式示例讲解
2014/03/04 Javascript
Jquery动态添加及删除页面节点元素示例代码
2014/06/16 Javascript
Nodejs异步回调的优雅处理方法
2014/09/25 NodeJs
JQuery中基础过滤选择器用法实例分析
2015/05/18 Javascript
JS实现可点击展开与关闭的左侧广告代码
2015/09/02 Javascript
概述VUE2.0不可忽视的很多变化
2016/09/25 Javascript
Bootstrap 3.x打印预览背景色与文字显示异常的解决
2016/11/06 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
2017/03/07 Javascript
vue-cli2打包前和打包后的css前缀不一致的问题解决
2018/08/24 Javascript
小程序开发中如何使用async-await并封装公共异步请求的方法
2019/01/20 Javascript
[04:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster 选手采访
2021/03/11 DOTA
Python利用多进程将大量数据放入有限内存的教程
2015/04/01 Python
Python正则表达式教程之二:捕获篇
2017/03/02 Python
python 内置函数filter
2017/06/01 Python
Python中.join()和os.path.join()两个函数的用法详解
2018/06/11 Python
Python3内置模块之base64编解码方法详解
2019/07/13 Python
Python selenium键盘鼠标事件实现过程详解
2020/07/28 Python
Python3获取cookie常用三种方案
2020/10/05 Python
CSS3实现任意图片lowpoly动画效果实例
2017/05/11 HTML / CSS
欧洲最大的球衣网上商店:Kitbag
2017/11/11 全球购物
世界上最伟大的马产品:Equiderma
2020/01/07 全球购物
英国时尚首饰品牌:Missoma
2020/06/29 全球购物
大学国际贸易专业自荐信
2014/06/05 职场文书
水电维修专业推荐信
2014/09/06 职场文书
Vue实现导入Excel功能步骤详解
2021/07/03 Vue.js
nginx反向代理配置去除前缀案例教程
2021/07/26 Servers