纯属无聊写的，可能有很多问题，欢迎批评指教。

效果图：图一是预设的一些弹幕，图二是自己发射的弹幕，效果是一样的。demo地址

 

首先是弹幕的位置，是要从最右滑到最左，为了防止随机高度弹幕会覆盖的问题，设置了通道。

每一个通道是从左到右的一条，高度固定，这样不同通道的弹幕不会相互覆盖。

弹幕滑动就是简单设置CSS属性  transition 实现。开始使用 left 改变弹幕的位置，后来改为 transform ，性能确实提高很多。

设置10条弹幕通道，每个通道有一个DOM池，每一次发射弹幕就从DOM池中拿出一个DOM从右滑到左边直到消失，然后再放回DOM池，当DOM池为空时就不能再通过该通道发射弹幕了，通过这种方式来限制最大同屏弹幕数。

因为通过 transition 设置了弹幕滑动的时间，而这个时间固定的，距离弹幕最左露头到最右消失，也就是“屏幕宽度+弹幕长度”，所以： 弹幕越长，速度越快 。这样的话，后面特别长的弹幕就有可能超过前面比较短的弹幕，本来根据弹幕长度设置了滑动时间，但是跑去看了下B站弹幕也有这个属性，所以就又改回去了>_<

最后设置一个弹幕池，设置一个定时器不停的去弹幕池拿弹幕，当DOM空闲且有未发射弹幕时就发射弹幕。

点击发送按钮就是把弹幕放到弹幕池就好了。

其实我写的挺简单的，又说了好多废话，代码里我都加了注释。这我是第一次写JS全部加了分号哦！表扬下自己。

完整代码：

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8" />

  <title>原生JS实现弹幕效果</title>

  <style>

    #wrapper {

      height: 400px;

      width: 700px;

      position: relative;

      overflow: hidden;

      background: url(http://www.drama-asia.se/wp-content/uploads/2016/06/14375197_1349947520504_800x600.jpg);

      color: #ffffff82;

      font-size: 14px;

      text-shadow: 1px 1px #000;

    }

    .right {

      position: absolute;

      visibility: hidden;

      white-space: nowrap;

      /*left: 700px;*/

      transform: translateX(700px);

    }

    .left {

      position: absolute;

      white-space: nowrap;

      user-select: none;

      transition: transform 7s linear; /* 时间相同 越长的弹幕滑动距离越长 所以越快~ */

    }

    input {

      position: absolute;

      bottom: 10px;

      left: 150px;

      width: 300px;

      height: 26px;

    }

    button {

      position: absolute;

      bottom: 8px;

      left: 476px;

      width: 100px;

      height: 38px;

      border-radius: 10px;

      font-size: 16px;

    }

  </style>

</head>

<body>

<div id="wrapper">

  <input type="text">

  <button>发&nbsp;&nbsp;送</button>

</div>

<script>

/**

 * 设置 弹幕DOM池 每一个通道最多六条弹幕

**/

const MAX_DM_COUNT = 6;

const CHANNEL_COUNT = 10;

let domPool = [];

let danmuPool = [

  '前方大量弹幕来袭，请做好准备！', '2333333', '2333333', '2333333', '2333333', '2333333',

  '浔阳江头夜送客， 枫叶荻花秋瑟瑟',  '2333333', '2333333', '2333333', '2333333', '2333333', '2333333',

  '主人下马客在船， 举酒欲饮无管弦。', '醉不成欢惨将别， 别时茫茫江浸月', '忽闻水上琵琶声， 主人忘归客不发。',

  '寻声暗问弹者谁？ 琵琶声停欲语迟。', '移船相近邀相见， 添酒回灯重开宴。', '千呼万唤始出来， 犹抱琵琶半遮面。',

  '转轴拨弦三两声， 未成曲调先有情。', '弦弦掩抑声声思， 似诉平生不得志。', '低眉信手续续弹， 说尽心中无限事。',

  '轻拢慢捻抹复挑， 初为霓裳后六幺。', '大弦嘈嘈如急雨， 小弦切切如私语。', '嘈嘈切切错杂弹， 大珠小珠落玉盘。',

  '间关莺语花底滑， 幽咽泉流冰下难。', '冰泉冷涩弦凝绝， 凝绝不通声暂歇。', '别有幽愁暗恨生， 此时无声胜有声。',

  '银瓶乍破水浆迸， 铁骑突出刀枪鸣。', '曲终收拨当心画， 四弦一声如裂帛。', '东船西舫悄无言， 唯见江心秋月白。',

  '沉吟放拨插弦中， 整顿衣裳起敛容。', '自言本是京城女， 家在虾蟆陵下住。', '十三学得琵琶成， 名属教坊第一部。',

  '曲罢曾教善才服， 妆成每被秋娘妒。', '五陵年少争缠头， 一曲红绡不知数。', '钿头银篦击节碎， 血色罗裙翻酒污。',

  '今年欢笑复明年， 秋月春风等闲度。', '弟走从军阿姨死， 暮去朝来颜色故。', '门前冷落鞍马稀， 老大嫁作商人妇。',

  '商人重利轻别离， 前月浮梁买茶去。', '去来江口守空船， 绕船月明江水寒。', '夜深忽梦少年事， 梦啼妆泪红阑干。',

  '我闻琵琶已叹息， 又闻此语重唧唧。', '同是天涯沦落人， 相逢何必曾相识！', '我从去年辞帝京， 谪居卧病浔阳城。',

  '浔阳地僻无音乐， 终岁不闻丝竹声。', '住近湓江地低湿， 黄芦苦竹绕宅生。', '其间旦暮闻何物？ 杜鹃啼血猿哀鸣。',

  '春江花朝秋月夜， 往往取酒还独倾。', '岂无山歌与村笛？ 呕哑嘲哳难为听。', '今夜闻君琵琶语， 如听仙乐耳暂明。',

  '莫辞更坐弹一曲， 为君翻作《琵琶行》。', '感我此言良久立， 却坐促弦弦转急。', '凄凄不似向前声， 满座重闻皆掩泣。',

  '座中泣下谁最多？ 江州司马青衫湿。'

];

let hasPosition = [];

/**

 * 做一下初始化工作

 */

function init() {

  let wrapper = document.getElementById('wrapper')

  // 先new一些span 重复利用这些DOM

  for (let j = 0; j < CHANNEL_COUNT; j++) {

    let doms = [];

    for (let i = 0; i < MAX_DM_COUNT; i++) {

      // 要全部放进wrapper

      let dom = document.createElement('span');

      wrapper.appendChild(dom);

      // 初始化dom的位置 通过设置className

      dom.className = 'right';

      // DOM的通道是固定的 所以设置好top就不需要再改变了

      dom.style.top = j * 20 + 'px';

      // 放入改通道的DOM池

      doms.push(dom);

      // 每次到transition结束的时候 就是弹幕划出屏幕了 将DOM位置重置 再放回DOM池

      dom.addEventListener('transitionend', () => {

        dom.className = 'right';

        // dom.style.transition = null;

        // dom.style.left = null;

        dom.style.transform = null;

        domPool[j].push(dom);

      });

    }

    domPool.push(doms);

  }

  // hasPosition 标记每个通道目前是否有位置

  for (let i = 0; i < CHANNEL_COUNT; i++) {

    hasPosition[i] = true;

  }

}

/**

 * 获取一个可以发射弹幕的通道 没有则返回-1

 */

function getChannel() {

  for (let i = 0; i < CHANNEL_COUNT; i++) {

    if (hasPosition[i] && domPool[i].length) return i;

  }

  return -1;

}

/**

 * 根据DOM和弹幕信息 发射弹幕

 */

function shootDanmu(dom, text, channel) {

  console.log('biu~ [' + text + ']');

  dom.innerText = text;

  // 如果为每个弹幕设置 transition 可以保证每个弹幕的速度相同 这里没有保证速度相同

  // dom.style.transition = `transform ${7 + dom.clientWidth / 100}s linear`;

  // dom.style.left = '-' + dom.clientWidth + 'px';

  // 设置弹幕的位置信息 性能优化 left -> transform

  dom.style.transform = `translateX(${-dom.clientWidth}px)`;

  dom.className = 'left';

  hasPosition[channel] = false;

  // 弹幕全部显示之后 才能开始下一条弹幕

  // 大概 dom.clientWidth * 10 的时间 该条弹幕就从右边全部划出到可见区域 再加1秒保证弹幕之间距离

  setTimeout(() => {

    hasPosition[channel] = true;

  }, dom.clientWidth * 10 + 1000);

}

window.onload = function() {

  init();

  // 为input和button添加事件监听

  let btn = document.getElementsByTagName('button')[0];

  let input = document.getElementsByTagName('input')[0];

  btn.addEventListener('click', () => {

    input.value = input.value.trim();

    if (input.value) danmuPool.push(input.value);

  })

  input.addEventListener('keyup', (e) => {

    if (e.key === 'Enter' && (input.value = input.value.trim())) {

      danmuPool.push(input.value);

    }

  })

  // 每隔1ms从弹幕池里获取弹幕（如果有的话）并发射

  setInterval(() => {

    let channel;

    if (danmuPool.length && (channel = getChannel()) != -1) {

      let dom = domPool[channel].shift();

      let danmu = danmuPool.shift();

      shootDanmu(dom, danmu, channel);

    }

  }, 1);

}

</script>

</body>

</html>

最后加一个 transform 和 left 的性能图对比：

transform

left

原生JS实现弹幕效果的更多相关文章

  1. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  2. 原生JS实现分页效果2.0（新增了上一页和下一页，添加当前元素样式）

    虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang=&qu ...

  3. 原生JS实现分页效果1.0

    不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html><html lang="en">&l ...

  4. js实现弹幕效果

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...

  5. 原生JS实现"旋转木马"效果的图片轮播插件

    一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...

  6. 原生js实现的效果

    原生js实现tooltip提示框的效果   在js的世界里面,每一个小的特效都那么微不足道,却又那么的令人向往与好奇.前端工程师的任务特别高大上,因为他们的一个小小的设计就会激发别人的求知欲.比如说我 ...

  7. 原生js仿jquery--animate效果

    效果 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  8. 原生js简易日历效果实现

    这里我们将用原生js实现简易的日历,原理和之前的原生js选项卡差不多,不过也有些区别: 首先html代码: <div class="container"> <di ...

  9. 再谈React.js实现原生js拖拽效果

    前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...

随机推荐

  1. gambit软件license文件

    最近自己的gambit软件license文件已经到期,后面采用fluent的license文件后,可以使用,但不能导入文件.不过通过努力,终于找到了可以实现导入文件的代码,并且可以实现无限期的使用fl ...

  2. concurrent.futures性能阐述

    python因为其全局解释器锁GIL而无法通过线程实现真正的平行计算.这个论断我们不展开,但是有个概念我们要说明,IO密集型 vs. 计算密集型. IO密集型:读取文件,读取网络套接字频繁. 计算密集 ...

  3. javascript和c#aes加密方法互解

    关键信息如下. javascript function Encrypt() { var key = CryptoJS.enc.Utf8.parse('8080808080808080'); var i ...

  4. 【Java】学习笔记（1）

    Java数据类型: 基本数据类型:(变量在栈中)数值型:byte(1个字节) short(2个字节) int(四个字节) long(8个字节) ,float(4字节) double(8字节) 字符型: ...

  5. 基于grafana+telegraf的服务器监控方案

    准备工作:安装InfluxDb 1 Windows 1.1 下载agent      https://dl.influxdata.com/telegraf/releases/telegraf-1.10 ...

  6. OvO

    OvO 知乎 网易云 图书馆 B站 小众软件 360极速浏览器下载 开源下载工具 下载地址1 下载地址2 下载地址3

  7. 关于python-flask中规范创建项目的几个关键py项目文件

    1.config.py——配置文件 DEBUG = True DIALECT = 'mysql' DRIVER = 'mysqldb' USERNAME = 'root' PASSWORD = '' ...

  8. APP界面设计 大概总结

    APP界面设计大概总结 首先,你得有个Android Studio 其次,你得学会有耐心的对它 最后,要适应它习惯它了解它 来看看APP的基本步骤 先有资源 再是界面布局 下来承载布局Activity ...

  9. 从文件中读取数组数据————Java

    自己总结一下Java文件的读取类似数组数据的方法,自己可以快速查看. 一.规整化数据: 对于数组数据是一一对应的情况 ArrayList<String> arrayList = new A ...

  10. 第五周助教工作总结——NWNU李泓毅

    第五周助教总结 注:因第四次实验安排两个标准时间完成,因此本周未提交完整作业. 本周心得: 第四次实验进行过半,八组同学都在实验课上进行了一次中期总结,并形成书面总结在微信群中讨论. 根据各组同学的中 ...