JS实现的视频弹幕效果示例


Posted in Javascript onAugust 17, 2018

本文实例讲述了JS实现的视频弹幕效果。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta charset="utf-8">
  <title>斗鱼弹幕</title>
  <style>
    html,body{font-size:10px;overflow:hidden;margin:0;padding:0;}
    #box{width:100%;height:100%;}
    #dm{width:100%;height:90vh;background:#E8F1F5;}
    #dm span{width:auto;height:3rem;font-size:2rem;line-height:2rem;position:absolute;white-space:nowrap;}
    #idDom{width:100%;height:10vh;background:#666;position:absolute;bottom:0;display:flex;align-items:center;justify-content:center;}
    #content{width:50rem;height:10vh;display:flex;align-items:center;justify-content:center;}
    .title{font-size:2.2px rein;color:#fff;line-height:#ccc;}
    .text{width:30rem;height:2.5rem;border:none;border-radius:.5rem;font-size:1.4rem;margin:0 .5rem;padding:0 1rem;}
    .btn{width:6rem;height:3rem;border:none;background:red;color:#fff;}
  </style>
</head>
<body>
<div class="box" id="box">
  <div id="dm"></div>
  <div class="idDom" id="idDom">
    <div id="content">
      <p class="title">吐槽:</p>
      <input type="text" class="text" id="text" placeholder="请输入你想说的话" />
      <button type="button" class="btn" id="btn">发射!</button>
    </div>
  </div>
</div>
<script langugae="javascript">
var timer;
var btn = document.getElementById('btn');
btn.onclick = function() { addBarrage();}
document.onkeydown = function(evt) {var event = evt || window.event;if (event.keyCode == 13) {addBarrage();}}
var colors = ['#2C3E50', '#FF0000', '#1E87F0', '#7AC84B', '#FF7F00', '#9B39F4', '#FF69B4'];//弹幕颜色库
function addBarrage() {
  clearInterval(timer);
  var text = document.getElementById('text').value;
  document.getElementById('text').value = "";
    var index = parseInt(Math.random() * colors.length); //随机弹幕颜色
  var screenW = window.innerWidth;
  var screenH = dm.offsetHeight;
  var max = Math.floor(screenH / 40);
  var height = 10 + 40 * (parseInt(Math.random() * (max + 1)) - 1);
  var span = document.createElement('span');
  span.style.left = screenW + 'px';
  span.style.top = height + 'px';
  span.style.color = colors[index];
  span.innerHTML = text;
  var dmDom = document.getElementById('dm');
  dmDom.appendChild(span);
  timer = setInterval(move, 10);
}
function move() {
  var arr=[];
  var oSpan=document.getElementsByTagName('span');
  for(var i=0;i<oSpan.length;i++){
    arr.push(oSpan[i].offsetLeft);
    arr[i] -= 2;
    oSpan[i].style.left = arr[i]+'px';
    if(arr[i]<-oSpan[i].offsetWidth){
      var dmDom=document.getElementById('dm');
      dmDom.removeChild(dmDom.childNodes[0]);
    }
  }
}
</script>
</body>
</html>

运行效果如下图所示:

JS实现的视频弹幕效果示例

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun,测试代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jquery 选择器引擎sizzle浅析
Feb 06 Javascript
JavaScript的jQuery库中function的存在和参数问题
Aug 13 Javascript
每天一篇javascript学习小结(Boolean对象)
Nov 12 Javascript
javascript伸缩型菜单实现代码
Nov 16 Javascript
聊一聊JavaScript作用域和作用域链
May 03 Javascript
BootStrap扔进Django里的方法详解
May 13 Javascript
JS实现根据密码长度显示安全条功能
Mar 08 Javascript
javascript实现二叉树遍历的代码
Jun 08 Javascript
JavaScript插件Tab选项卡效果
Nov 14 Javascript
vue中过滤器filter的讲解
Jan 21 Javascript
vue实现移动端省市区选择
Sep 27 Javascript
JS数组的常用10种方法详解
May 08 Javascript
Node.js Koa2使用JWT进行鉴权的方法示例
Aug 17 #Javascript
jQuery实现轮播图及其原理详解
Apr 12 #jQuery
chosen实现省市区三级联动
Aug 16 #Javascript
webuploader实现上传图片到服务器功能
Aug 16 #Javascript
Vue+webpack+Element 兼容问题总结(小结)
Aug 16 #Javascript
Vue 与 Vuex 的第一次接触遇到的坑
Aug 16 #Javascript
深入理解Vue 组件之间传值
Aug 16 #Javascript
You might like
饭制《星际争霸》Mod:优化游戏机制 增加新单位
2017/07/02 星际争霸
Ext.data.PagingMemoryProxy分页一次性读取数据的实现代码
2010/04/07 PHP
Laravel 5框架学习之向视图传送数据(进阶篇)
2015/04/08 PHP
自定义min版smarty模板引擎MinSmarty.class.php文件及用法
2016/05/20 PHP
php实现登录tplink WR882N获取IP和重启的方法
2016/07/20 PHP
老生常谈PHP面向对象之解释器模式
2017/05/17 PHP
PHP时间处理类操作示例
2018/09/05 PHP
JavaScript.The.Good.Parts阅读笔记(二)作用域&amp;闭包&amp;减缓全局空间污染
2010/11/16 Javascript
javascript获取作用在元素上面的样式属性代码
2012/09/20 Javascript
DWZ table的原生分页浅谈
2013/03/01 Javascript
JS获取各种浏览器窗口大小的方法
2014/01/14 Javascript
js动态切换图片的方法
2015/01/20 Javascript
微信小程序之多文件下载的简单封装示例
2018/01/29 Javascript
React Form组件的实现封装杂谈
2018/05/07 Javascript
es6中new.target的作用和使用场景简单示例分析
2020/03/14 Javascript
基于vue实现简易打地鼠游戏
2020/08/21 Javascript
[01:21:07]EG vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
Mac下Supervisor进程监控管理工具的安装与配置
2014/12/16 Python
Python使用修饰器执行函数的参数检查功能示例
2017/09/26 Python
numpy添加新的维度:newaxis的方法
2018/08/02 Python
python爬虫 Pyppeteer使用方法解析
2019/09/28 Python
Python搭建Keras CNN模型破解网站验证码的实现
2020/04/07 Python
如何基于python实现不邻接植花
2020/05/01 Python
基于HTML5的齿轮动画特效
2016/02/29 HTML / CSS
来自世界各地的饮料:Flavourly
2019/05/06 全球购物
美团网旗下网上订餐平台:美团外卖
2020/03/05 全球购物
法国亚马逊官方网站:Amazon.fr
2020/12/19 全球购物
银行个人求职自荐信范文
2013/12/16 职场文书
秋天的雨教学反思
2014/04/27 职场文书
建筑工程造价专业自荐信
2014/07/08 职场文书
数学教师个人总结
2015/02/06 职场文书
2015年世界卫生日活动总结
2015/02/09 职场文书
小学英语教师研修感悟
2015/11/18 职场文书
大学生社会服务心得体会
2016/01/22 职场文书
亲情作文之母爱
2019/09/25 职场文书
python中pymysql包操作数据库方法
2022/04/19 Python