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 相关文章推荐
在 IE 中调用 javascript 打开 Excel 表
Dec 21 Javascript
JS 实现点击a标签的时候让其背景更换
Oct 15 Javascript
分享一款基于jQuery的视频播放插件
Oct 09 Javascript
jQuery修改li下的样式以及li下的img的src的值的方法
Nov 02 Javascript
jQuery实现图片走马灯效果的原理分析
Jan 16 Javascript
浅析bootstrap原理及优缺点
Mar 19 Javascript
vue获取dom元素注意事项
Dec 28 Javascript
jquery实现企业定位式导航效果
Jan 01 jQuery
微信小程序实现YDUI的ScrollNav组件
Feb 02 Javascript
webpack4.x下babel的安装、配置及使用详解
Mar 07 Javascript
VUE实现图片验证码功能
Nov 18 Javascript
VUE兄弟组件传值操作实例分析
Oct 26 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
PHP spl_autoload_register实现自动加载研究
2011/12/06 PHP
PHP小教程之实现双向链表
2014/06/12 PHP
PHP把JPEG图片转换成Progressive JPEG的方法
2014/06/30 PHP
Yii学习总结之安装配置
2015/02/22 PHP
PHP PDOStatement::errorInfo讲解
2019/01/31 PHP
PHP 数组黑名单/白名单实例代码详解
2019/06/04 PHP
Gambit vs CL BO3 第二场 2.13
2021/03/10 DOTA
Microsoft Ajax Minifier 压缩javascript的方法
2010/03/05 Javascript
javascript scrollTop正解使用方法
2013/11/14 Javascript
Ajax局部更新导致JS事件重复触发问题的解决方法
2014/10/14 Javascript
jQuery+ajax实现动态执行脚本的方法
2015/01/27 Javascript
JavaScript替换当前页面的方法
2015/04/03 Javascript
JavaScript模仿Pinterest实现图片预加载功能
2016/10/25 Javascript
JavaScript获取tr td 的三种方式全面总结(推荐)
2017/08/15 Javascript
Vue插件打包与发布的方法示例
2018/08/20 Javascript
js 实现在2d平面上画8的方法
2018/10/10 Javascript
原生JS实现动态添加新元素、删除元素方法
2019/05/05 Javascript
python函数装饰器用法实例详解
2015/06/04 Python
Python文件夹与文件的相关操作(推荐)
2016/07/25 Python
python操作 hbase 数据的方法
2016/12/18 Python
Python中函数的返回值示例浅析
2019/08/28 Python
tensorflow tf.train.batch之数据批量读取方式
2020/01/20 Python
Python3.7实现验证码登录方式代码实例
2020/02/14 Python
python实现飞机大战项目
2020/03/11 Python
Python字符串查找基本操作代码案例
2020/10/27 Python
Python 利用Entrez库筛选下载PubMed文献摘要的示例
2020/11/24 Python
python自动打开浏览器下载zip并提取内容写入excel
2021/01/04 Python
写一个函数,求一个字符串的长度。在main函数中输入字符串,并输出其长度
2015/11/18 面试题
应届毕业生的个人自我鉴定
2013/10/24 职场文书
医科大学生毕业的自我评价分享
2013/11/12 职场文书
大学活动总结格式
2014/04/29 职场文书
我的老师教学反思
2014/05/01 职场文书
单方离婚协议书范本2014
2014/10/28 职场文书
六一文艺汇演开幕词
2015/01/29 职场文书
2016党员学习《反对自由主义》心得体会
2016/01/22 职场文书
Java中的Kafka为什么性能这么快及4大核心详析
2022/09/23 Java/Android