弹幕

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

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

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

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

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

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

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

效果图：

　　　

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>原生JS实现弹幕效果</title>
<style>
#wrapper {
height: 400px;
width: 700px;
position: relative;
overflow: hidden;
background: url(./game_manwall_213255_m.jpg);    //自己换个背景图
color: #ffffff82;
font-size: 14px;
text-shadow: 1px 1px #000;
margin: 0 auto;
}
.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 id="bth">发&nbsp;&nbsp;送</button>
</div>
<script>
/**
* 设置 弹幕DOM池 每一个通道最多六条弹幕
**/
const MAX_DM_COUNT = 6;
const CHANNEL_COUNT = 10;
let domPool = [];
let danmuPool = [
'2333333', '233333366666666666666', '2333333', '2333333', '2333333',
'2333333', '2333333', '233333366666', '2333333', '2333333', '2333333',
'66666666','888888888','ahahahaha','2333333', '233333366666666666666', '2333333', '2333333', '2333333',
'2333333', '2333333', '233333366666', '2333333', '2333333', '2333333',
'66666666','888888888','ahahahaha','2333333', '233333366666666666666', '2333333', '2333333', '2333333',
'2333333', '2333333', '233333366666', '2333333', '2333333', '2333333',
'66666666','888888888','ahahahaha'
 
];
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;
var bth=document.getElementById("bth");
bth.onclick=function(){
dom.innerHTML=text.value;
};
// 弹幕全部显示之后 才能开始下一条弹幕
// 大概 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>

JavaScript简单的弹幕的更多相关文章

  1. JavaScript实现简单的弹幕效果实例分析

    不知大家有没有感受到,弹幕又是另一出好戏!! 不过我个人还是比较排斥看电视的时候被出来的弹幕打扰.今天我们来写一个简单的弹幕.简单到什么程度呢?看下效果: 由图可以看出,我们的呆毛html结构确实是非 ...

  2. JavaScript简单入门(补充篇)

    本文是对上一篇 JavaScript简单入门 的一些细节补充. 一.全局变量和局部变量 在<script>标签内定义的变量是当前页面中的全局变量.即 <script>标签可以直 ...

  3. 《javascript高级程序设计》读书笔记（一）javascript简单介绍

    第一章:javascript简单介绍 Netscape Navigator 开发的javascript   Javascript的实现有三部分: 1.核心(ECMAScript):提供核心语言功能. ...

  4. Javascript 简单实现鼠标拖动DIV

    http://zhangbo-peipei-163-com.iteye.com/blog/1740078 比较精简的Javascript拖动效果函数代码 http://www.jb51.net/art ...

  5. 用react的ReactCSSTransitionGroup插件实现简单的弹幕动画

    1,开始的思路 公司想做直播方面的项目,并想加入弹幕的功能,直播的页面已经作为一个组件放在了用react+redux写好的一个网站项目上.所以技术老大让我研究下如何用react实现弹幕的功能.下面我就 ...

  6. [Java Web] 4、JavaScript 简单例子(高手略过)

    内容概览: JavaScript简介 JavaScript的基本语法 JavaScript的基本应用 JavaScript的事件处理 window对象的使用 JavaScript简介: JavaScr ...

  7. javascript - 简单实现一个图片延迟加载的jQuery插件

    最近在看一本书<Third-Party Javascript>很不错,推荐给大家,下载地址各位自己搜索了. 步骤: 1.打开google,鉴于google基本打不开,那么就打开这个网址吧. ...

  8. javascript 简单的计算器

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx. ...

  9. 基于CommentCoreLibrary简单的弹幕实现

    本文地址:http://www.cnblogs.com/liaoyu/p/ccl-demo.html 实现基于开源的 CommentCoreLibrary 最近有需求要实现一个简单的评论弹幕实现,通过 ...

随机推荐

  1. Java虚拟机学习笔记（一）之初识

    一:特定 跨平台性.安全性.可移植性. 二:体系机构 Java 体系结构包括四个独立但相关的技术: Java程序设计语言 Java Class文件格式 Java 应用编程接口(API) Java 虚拟 ...

  2. Kubernetes容器集群管理环境 - 完整部署（中篇）

    接着Kubernetes容器集群管理环境 - 完整部署(上篇)继续往下部署: 八.部署master节点master节点的kube-apiserver.kube-scheduler 和 kube-con ...

  3. 前端笔记之微信小程序（三）GET请求案例&文件上传和相册API&配置https

    一.信息流小程序-GET请求案例 1.1服务端接口开发 一定要养成接口的意识,前端单打独斗出不来任何效果,必须有接口配合,写一个带有分页.关键词查询的接口: 分页接口:http://127.0.0.1 ...

  4. 直击--vue项目微信小程序页面跳转web-view不刷新-根源

    背景 最近项目需要适配小程序,项目是使用了vue开发的网站,其中改造方式是,每个页面都使用小程序创建一个页面通过web-view来显示指定页面的. 在没有使用小程序时,路由跳转时,刷新页面等等,这个是 ...

  5. Microsoft Access数据库操作类(C#)

    博文介绍的Microsoft Access数据库操作类是C#语言的,可实现对Microsoft Access数据库的增删改查询等操作.并且该操作类可实现对图片的存储,博文的最后附上如何将Image图片 ...

  6. 2321. 【NOIP普及组T1】方程

    2321. [NOIP普及组T1]方程 时间限制: 1000 ms  空间限制: 262144 KB 题目描述

  7. Throughput Controller

    吞吐量控制器(Throughput Controller)介绍 作用:控制其子节点的执行次数与负载比例分配 Total Executions: 整个测试计划中的总执行次数 Percent Execut ...

  8. HTML文件上传与下载

    文件下载 传统的文件下载有两种方法: 使用<a/>标签,href属性直接连接到服务器的文件路径 window.location.href="url" 这两种方法效果一样 ...

  9. Jenkins将ASP.NETCore部署到Azure

    首先需要获得Azure上App-service 的porfile. 登录portal 选到app,点击Get publish pofile 将得到一个 ****.PublishSettings,注意这 ...

  10. react-navigation

    安卓端React Navigation的TabNavigator选项卡与react-native-scrollable-tab-view.FlatList一起使用,只显示第一页的内容. 解决方案: 给 ...