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插件之validation插件
Mar 29 jQuery
使用jQuery和ajax代替iframe的方法(详解)
Apr 12 jQuery
jquery ui sortable拖拽后保存位置
Apr 27 jQuery
jQuery实现简单的手风琴效果
Apr 17 jQuery
jquery拖动改变div大小
Jul 04 jQuery
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
jquery鼠标悬停导航下划线滑出效果
Sep 29 jQuery
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 jQuery
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 jQuery
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 jQuery
jQuery操作元素的内容和样式完整实例分析
Jan 10 jQuery
jQuery实现tab栏切换效果
Dec 22 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面向对象编程快速入门
2006/12/14 PHP
浅析PHP中的UNICODE 编码与解码
2013/06/29 PHP
php获取文件夹路径内的图片以及分页显示示例
2014/03/11 PHP
php字符串替换函数substr_replace()用法实例
2015/03/17 PHP
php实现微信公众平台账号自定义菜单类
2015/10/11 PHP
php抽象方法和抽象类实例分析
2016/12/07 PHP
基于JQuery的一个简单的鼠标跟随提示效果
2010/09/23 Javascript
jQuery用unbind方法去掉hover事件及其他方法介绍
2013/03/18 Javascript
JS添加删除一组文本框并对输入信息加以验证判断其正确性
2013/04/11 Javascript
Jquery Uploadify上传带进度条的简单实例
2014/02/12 Javascript
javascript文件中引用依赖的js文件的方法
2014/03/17 Javascript
JavaScript中匿名函数的用法及优缺点详解
2016/06/01 Javascript
JavaScript 继承详解(五)
2016/10/11 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
2016/12/18 Javascript
jQuery与js实现颜色渐变的方法
2016/12/30 Javascript
bootstrap输入框组件使用方法详解
2017/01/19 Javascript
jQuery实现div跟随鼠标移动
2020/08/20 jQuery
详解nodejs实现本地上传图片并预览功能(express4.0+)
2017/06/28 NodeJs
JavaScript事件发布/订阅模式原理与用法分析
2018/08/21 Javascript
WebGL学习教程之Three.js学习笔记(第一篇)
2019/04/25 Javascript
浅入深出Vue之自动化路由
2019/08/06 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
2020/04/03 Javascript
vue项目或网页上实现文字转换成语音播放功能
2020/06/09 Javascript
js闭包的9个使用场景
2020/12/29 Javascript
[01:07:11]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python学习教程之使用py2exe打包
2017/09/24 Python
浅谈python爬虫使用Selenium模拟浏览器行为
2018/02/23 Python
python整合ffmpeg实现视频文件的批量转换
2019/05/31 Python
Python实现基于socket的udp传输与接收功能详解
2019/11/15 Python
canvas简单连线动画的实现代码
2020/02/04 HTML / CSS
座谈会主持词
2014/03/20 职场文书
处级领导干部四风问题自我剖析材料
2014/09/29 职场文书
法人单位授权委托书范文
2014/10/06 职场文书
诉讼授权委托书
2014/10/15 职场文书
2014年酒店工作总结范文
2014/11/17 职场文书
公司转让协议书
2016/03/19 职场文书