jquery实现直播弹幕效果


Posted in jQuery onNovember 28, 2019

本文实例为大家分享了jquery直播弹幕展示的具体代码,供大家参考,具体内容如下

理论知识:

实现效果主要涉及jq对节点的操作,以及动画函数的使用…

思路:

1.获取到评论文本框的值,对文本内容进行处理

2.动态创建一条弹幕,将创建的弹幕动态的添加到需要显示的页面,并同时创建一条新的评论消息,动态添加到评论列表

3.利用数组将每次添加的弹幕保存起来,使用定时器让所有的弹幕循环动态的展示出来

大体上的思路就是这样,下面直接贴代码?

<!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实现直播弹幕效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery树插件zTree使用方法详解
May 02 jQuery
最常用的jQuery表单验证(简单)
May 23 jQuery
jQuery Validate表单验证插件实现代码
Jun 08 jQuery
javascript+jQuery实现360开机时间显示效果
Nov 03 jQuery
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 jQuery
jQuery实现的淡入淡出与滑入滑出效果示例
Apr 18 jQuery
jQuery创建及操作xml格式数据示例
May 26 jQuery
一文快速了解JQuery中的AJAX
May 31 jQuery
jquery实现的分页显示功能示例
Aug 23 jQuery
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
jQuery HTML设置内容和属性操作实例分析
May 20 jQuery
jQuery实现鼠标拖拽登录框移动效果
Sep 13 jQuery
jQuery实现简单弹幕效果
Nov 28 #jQuery
jQuery实现轮播图效果
Nov 26 #jQuery
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 #jQuery
高效jQuery选择器的5个技巧实例分析
Nov 26 #jQuery
jquery使用echarts实现有向图可视化功能示例
Nov 25 #jQuery
jQuery Raty星级评分插件使用方法实例分析
Nov 25 #jQuery
jquery 插件重新绑定的处理方法分析
Nov 23 #jQuery
You might like
php is_file()和is_dir()用于遍历目录时用法注意事项
2010/03/02 PHP
JS与PHP向函数传递可变参数的区别实例代码
2011/05/18 PHP
js chrome浏览器判断代码
2010/03/28 Javascript
jquery和ajax的关系详细介绍
2013/11/29 Javascript
jQuery源码分析之jQuery中的循环技巧详解
2014/09/06 Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
2014/12/08 Javascript
Nodejs中读取中文文件编码问题、发送邮件和定时任务实例
2015/01/01 NodeJs
Windows环境下npm install 报错: operation not permitted, rename的解决方法
2016/09/26 Javascript
80%应聘者都不及格的JS面试题
2017/03/21 Javascript
AngularJS学习笔记之表单验证功能实例详解
2017/07/06 Javascript
如何让你的JS代码更好看易读
2017/12/01 Javascript
Vue.js实现的表格增加删除demo示例
2018/05/22 Javascript
Nodejs异步回调之异常处理实例分析
2018/06/22 NodeJs
react native 获取地理位置的方法示例
2018/08/28 Javascript
vue input实现点击按钮文字增删功能示例
2019/01/29 Javascript
小程序云开发实现数据库异步操作同步化
2019/05/18 Javascript
JS实现的简单tab切换功能完整示例
2019/06/20 Javascript
js实现无缝轮播图效果
2020/03/09 Javascript
TensorFlow 合并/连接数组的方法
2018/07/27 Python
pyqt5让图片自适应QLabel大小上以及移除已显示的图片方法
2019/06/21 Python
如何用Python来搭建一个简单的推荐系统
2019/08/07 Python
Python算法中的时间复杂度问题
2019/11/19 Python
python清空命令行方式
2020/01/13 Python
tensorflow 保存模型和取出中间权重例子
2020/01/24 Python
Python3 获取文件属性的方式(时间、大小等)
2020/03/12 Python
Python多线程正确用法实例解析
2020/05/30 Python
python如何进行矩阵运算
2020/06/05 Python
村干部承诺书
2014/03/28 职场文书
高三上学期学习自我评价
2014/04/23 职场文书
安全环保标语
2014/06/09 职场文书
副主任竞聘演讲稿
2014/08/18 职场文书
人间正道是沧桑观后感
2015/06/15 职场文书
行政复议答复书
2015/07/01 职场文书
2016情人节宣传语
2015/07/14 职场文书
python和Appium的移动端多设备自动化测试框架
2022/04/26 Python
tomcat下部署jenkins的方法
2022/05/06 Servers