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 相关文章推荐
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
jQuery实现div跟随鼠标移动
Aug 20 jQuery
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 jQuery
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 jQuery
解决JQuery全选/反选第二次失效的问题
Oct 11 jQuery
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 jQuery
jquery自定义显示消息数量
Dec 19 jQuery
jQuery+koa2实现简单的Ajax请求的示例
Mar 06 jQuery
jQuery pagination分页示例详解
Oct 23 jQuery
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 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
对javascript和select部件的结合运用
2006/10/09 PHP
PHP三元运算的2种写法代码实例
2014/05/12 PHP
php中stdClass的用法分析
2015/02/27 PHP
JavaScript进阶教程(第四课第一部分)
2007/04/05 Javascript
JavaScript与Div对层定位和移动获得坐标的实现代码
2010/09/08 Javascript
js下通过getList函数实现分页效果的代码
2010/09/17 Javascript
在图片上显示左右箭头类似翻页的代码
2013/03/04 Javascript
JS保留两位小数,多位小数的示例代码
2014/01/07 Javascript
php中给js数组赋值方法
2014/03/10 Javascript
jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)
2014/04/10 Javascript
浅析$.getJSON异步请求和同步请求
2016/06/06 Javascript
Vue实现表格中对数据进行转换、处理的方法
2018/09/06 Javascript
Vue通过ref父子组件拿值方法
2018/09/12 Javascript
Angular6 发送手机验证码按钮倒计时效果实现方法
2019/01/08 Javascript
layui动态渲染生成select的option值方法
2019/09/23 Javascript
Python中声明只包含一个元素的元组数据方法
2014/08/25 Python
使用Python的Twisted框架构建非阻塞下载程序的实例教程
2016/05/25 Python
Python获取暗黑破坏神3战网前1000命位玩家的英雄技能统计
2016/07/04 Python
Django如何实现内容缓存示例详解
2017/09/24 Python
使用python将时间转换为指定的格式方法
2018/11/12 Python
react+django清除浏览器缓存的几种方法小结
2019/07/17 Python
python 实现检验33品种数据是否是正态分布
2019/12/09 Python
window环境pip切换国内源(pip安装异常缓慢的问题)
2019/12/31 Python
解决Tensorflow 内存泄露问题
2020/02/05 Python
python中count函数简单的实例讲解
2020/02/06 Python
Python3 pyecharts生成Html文件柱状图及折线图代码实例
2020/09/29 Python
Python实现我的世界小游戏源代码
2021/03/02 Python
大学生就业推荐信范文
2013/11/29 职场文书
自我鉴定怎么写
2013/12/05 职场文书
给校长的建议书
2014/03/12 职场文书
幼儿园中班下学期评语
2014/04/18 职场文书
婚礼庆典答谢词
2015/01/20 职场文书
面试通知邮件
2015/04/20 职场文书
盗窃罪辩护词范文
2015/05/21 职场文书
《文化苦旅》读后感:阅读,让人诗意地栖居在大地上
2019/12/24 职场文书
Python echarts实现数据可视化实例详解
2022/03/03 Python