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 实现图片的依次加载图片功能
Jul 06 jQuery
jQuery选择器之子元素过滤选择器
Sep 28 jQuery
jQuery响应滚动条事件功能示例
Oct 14 jQuery
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
jQuery阻止事件冒泡实例分析
Jul 03 jQuery
jQuery实现菜单的显示和隐藏功能示例
Jul 24 jQuery
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 jQuery
详解jQuery中的getAll()和cleanData()
Apr 15 jQuery
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 jQuery
jquery css实现流程进度条
Mar 26 jQuery
JQuery复选框全选效果如何实现
May 08 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
织梦模板标记简介
2007/03/11 PHP
PHP 中执行排序与 MySQL 中排序
2009/04/21 PHP
php中二维数组排序问题方法详解
2015/08/28 PHP
PHP对象相关知识总结
2017/04/09 PHP
基于laravel-admin 后台 列表标签背景的使用方法
2019/10/03 PHP
用js格式化金额可设置保留的小数位数
2014/05/09 Javascript
JsRender for object语法简介
2014/10/31 Javascript
javascript运动详解
2015/07/06 Javascript
基于javascript实现tab切换特效
2016/03/29 Javascript
jquery ajax结合thinkphp的getjson实现跨域的方法
2016/06/06 Javascript
返回函数的JavaScript函数
2016/06/14 Javascript
很棒的js选项卡切换效果
2016/07/15 Javascript
video.js使用改变ui过程
2017/03/05 Javascript
JS回调函数基本定义与用法实例分析
2017/05/24 Javascript
JS中的多态实例详解
2017/10/15 Javascript
图片加载完成再执行事件的实例
2017/11/16 Javascript
浅谈Vue.js 中的 v-on 事件指令的使用
2018/11/25 Javascript
利用不到200行代码写一款属于你自己的js类库
2019/07/08 Javascript
详解vue-video-player使用心得(兼容m3u8)
2019/08/23 Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
2019/12/16 Javascript
Python实现在Linux系统下更改当前进程运行用户
2015/02/04 Python
mac下如何将python2.7改为python3
2018/07/13 Python
自学python的建议和周期预算
2019/01/30 Python
OpenCV+Python3.5 简易手势识别的实现
2020/12/21 Python
阿迪达斯意大利在线商店:adidas意大利
2016/09/19 全球购物
eDreams葡萄牙:全球最大的在线旅行社之一
2019/04/15 全球购物
瑞士最大的图书贸易公司:Orell Füssli
2019/12/28 全球购物
LINUX下线程,GDI类的解释
2012/04/17 面试题
学生自我鉴定范文
2013/10/04 职场文书
全运会口号
2014/06/20 职场文书
工作目标责任书
2014/07/23 职场文书
趣味运动会广播稿
2014/09/13 职场文书
2014院党委领导班子对照检查材料思想汇报
2014/09/24 职场文书
给老婆道歉的话
2015/01/20 职场文书
Python爬虫之爬取哔哩哔哩热门视频排行榜
2021/04/28 Python
MySQL GTID复制的具体使用
2022/05/20 MySQL