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 相关文章推荐
javascritp实现input输入框相关限制用法
Jun 29 Javascript
IE、FF、Chrome浏览器中的JS差异介绍
Aug 13 Javascript
jquery ajax jsonp跨域调用实例代码
Dec 11 Javascript
js实现select跳转功能代码
Oct 22 Javascript
JavaScript实现Java中Map容器的方法
Oct 09 Javascript
vue.js学习笔记之绑定style样式和class列表
Oct 31 Javascript
浅谈React 属性和状态的一些总结
Nov 21 Javascript
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 jQuery
解决Webpack 热部署检测不到文件变化的问题
Feb 22 Javascript
原生JS+HTML5实现的可调节写字板功能示例
Aug 30 Javascript
深入解析vue 源码目录及构建过程分析
Apr 24 Javascript
js 解析 JSON 数据简单示例
Apr 21 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
WINXP下apache+php4+mysql
2006/11/25 PHP
PHP中用header图片地址 简单隐藏图片源地址
2008/04/09 PHP
MySql中正则表达式的使用方法描述
2008/07/30 PHP
PHP 简单数组排序实现代码
2009/08/05 PHP
Zend Framework教程之配置文件application.ini解析
2016/03/10 PHP
Yii开启片段缓存的方法
2016/03/28 PHP
PHP文件下载实例代码浅析
2016/08/17 PHP
学习jquery必备 api中英文对照的chm手册 下载
2007/05/03 Javascript
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
2013/04/19 Javascript
JavaScript获取表单enctype属性的方法
2015/04/02 Javascript
Jqgrid之强大的表格插件应用
2015/12/02 Javascript
JavaScript中的原始值和复杂值
2016/01/07 Javascript
jQuery Ajax 全局调用封装实例代码详解
2016/06/02 Javascript
javascript 解决浏览器不支持的问题
2016/09/24 Javascript
微信小程序 教程之列表渲染
2016/10/18 Javascript
使用 NodeJS+Express 开发服务端的简单介绍
2017/04/07 NodeJs
js判断用户是输入的地址请求的路径(实例讲解)
2017/07/18 Javascript
微信小程序实现列表下拉刷新上拉加载
2020/07/29 Javascript
react写一个select组件的实现代码
2019/04/03 Javascript
详解微信小程序胶囊按钮返回|首页自定义导航栏功能
2019/06/14 Javascript
JS实现横向跑马灯效果代码
2020/04/20 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
2020/11/17 Vue.js
iview实现动态表单和自定义验证时间段重叠
2021/01/10 Javascript
[49:35]2018DOTA2亚洲邀请赛3月30日 小组赛A组 KG VS TNC
2018/03/31 DOTA
归纳整理Python中的控制流语句的知识点
2015/04/14 Python
python命令行工具Click快速掌握
2019/07/04 Python
python调用webservice接口的实现
2019/07/12 Python
python fuzzywuzzy模块模糊字符串匹配详细用法
2019/08/29 Python
django 做 migrate 时 表已存在的处理方法
2019/08/31 Python
python能开发游戏吗
2020/06/11 Python
CSS3 3D制作实战案例分析
2016/09/18 HTML / CSS
挖掘机司机岗位职责
2014/02/12 职场文书
2014年教师节演讲稿
2014/09/03 职场文书
2015年预算员工作总结
2015/05/14 职场文书
2015银行年终工作总结范文
2015/05/26 职场文书
中秋节主题班会
2015/08/14 职场文书