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 进入页面默认给已赋值的复选框打钩
Mar 23 jQuery
jQuery查找dom的几种方法效率详解
May 17 jQuery
jquery append与appendTo方法比较
May 24 jQuery
jQuery异步提交表单实例
May 30 jQuery
jQuery动画_动力节点节点Java学院整理
Jul 04 jQuery
JQuery EasyUI的一些常用组件
Jul 12 jQuery
jquery之基本选择器practice(实例讲解)
Sep 30 jQuery
jQuery实现轮播图及其原理详解
Apr 12 jQuery
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
jquery实现聊天机器人
Feb 08 jQuery
如何使用jQuery操作Cookies方法解析
Sep 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
兼容ie6浏览器的php下载文件代码分享
2014/07/14 PHP
php实现的后台表格分页功能示例
2017/10/23 PHP
一段利用WSH修改和查看IP配置的代码
2008/05/11 Javascript
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
2009/12/07 Javascript
Javascript Cookie读写删除操作的函数
2010/03/02 Javascript
带左右箭头图片轮播的JS代码
2013/12/18 Javascript
checkbox选中与未选中判断示例
2014/08/04 Javascript
JQuery实现防止退格键返回的方法
2015/02/12 Javascript
js Dom实现换肤效果
2017/10/21 Javascript
JS中的BOM应用
2018/02/02 Javascript
vue引入axios同源跨域问题
2018/09/27 Javascript
JS跨域请求的问题解析
2018/12/03 Javascript
JS面试题中深拷贝的实现讲解
2020/05/07 Javascript
jQuery+ajax实现文件上传功能
2020/12/22 jQuery
python自动化测试实例解析
2014/09/28 Python
Python DataFrame设置/更改列表字段/元素类型的方法
2018/06/09 Python
在Python中输入一个以空格为间隔的数组方法
2018/11/13 Python
flask-restful使用总结
2018/12/04 Python
使用WingPro 7 设置Python路径的方法
2019/07/24 Python
python requests使用socks5的例子
2019/07/25 Python
Python-for循环的内部机制
2020/06/12 Python
Django中和时区相关的安全问题详解
2020/10/12 Python
Linux系统下升级pip的完整步骤
2021/01/31 Python
CSS3打造磨砂玻璃背景效果
2016/09/28 HTML / CSS
canvas实现滑动验证的实现示例
2020/08/11 HTML / CSS
黑猩猩商店:The Chimp Store
2020/02/12 全球购物
电子商务专业学生的学习自我评价
2013/10/27 职场文书
大专应届生个人的自我评价
2013/11/21 职场文书
求职信范文英文版
2014/01/05 职场文书
高三毕业典礼主持词
2014/03/27 职场文书
歌颂祖国的演讲稿
2014/05/04 职场文书
青春演讲稿范文
2014/05/08 职场文书
家庭贫困证明
2015/06/16 职场文书
运动会通讯稿50字
2015/07/20 职场文书
幼儿园2016年感恩节活动总结
2016/04/01 职场文书
MySQL query_cache_type 参数与使用详解
2021/07/01 MySQL