原生js实现弹幕效果原理 二
距离写实现原理一有很长一段时间了，因为好像没什么人看，所以我就不太想写原理二，为了不食言，我还是坚持做完这个系列吧
下面介绍的就是目前主流直播弹幕网站的弹幕实现方式，包括弹幕指定暂停，点赞，举报功能.
首先来看一张实现动图
原理简介
- 动画效果使用css3中的 transition 属性实现
- 只有transition是远远不够的，因为transition需要主动触发，但是一般网上常见的简单的触发方式，就是 定义css样式的:hover或者:focus属性，指定用户的某一个活动主动触发transition,这显然是无法实现弹幕自动化效果的。因此，可以想到使用js触发。css触发说到底也就是当满足某种条件时，替换dom元素的class样式。
- 知道原理以后我们要做的就是，在适当的时机给弹幕dom添加上class或者移除class，在js里这是非常简单的，dom.classList.add(“xxx”)实现添加class，dom.classList.remove(“xxx”)移除class.
- 上面强调的 适当 这个词大有文章，
众所周知，js是一个单线程编程语言，可能有些人被setInterval和setTimeOut函数误导，以为是js引擎新开了一个线程去处理定时功能，但实际上，js引擎所做仅仅只是，1.将计时任务放到一个带有优先级的事件队列中 2.然后一个一个的执行事件 - 上面说了js引擎是单线程按队列顺序执行事件，但每个事件之间不可避免的会有间隔时间，在这个间隔时间里js引擎是空闲的，当js引擎空闲时，就是GUI绘制引擎工作的时间了，GUI引擎做的工作就是渲染dom。即是说，并不是说js刚改变class，dom元素的样式就会刷新，中间有一个间隔时间，这个间隔时间就是GUI引擎在等待js引擎空闲,具体的细节你们可以去https://blog.csdn.net/qq_36995542/article/details/80007381看看。
源代码解析
首先是html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content=="IE=edge"/>
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>-------------</title>
<link type="text/css" href="script/jquery-easyui-1.7.5/themes/icon.css" rel="stylesheet">
<link type="text/css" href="script/jquery-easyui-1.7.5/themes/default/easyui.css" rel="stylesheet">
<script type="text/javascript" src="script/jquery.min.js"></script>
<script type="text/javascript" src="script/jquery-easyui-1.7.5/jquery.easyui.min.js"></script>
<script type="text/javascript" src="script/jquery-easyui-1.7.5/locale/easyui-lang-zh_CN.js"></script>
<link type="text/css" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"
rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css?t=1.1.24">
</head>
<body>
<nav class="side-menu">
<div class="settings">
<img class="head-icon" src="pic/head-icon-1.jpg" />
</div>
<div class="menu-ul">
<ul>
<li>
<a href="#">
<i class="fa fa-home fa-lg"></i>
<span class="nav-text">Home</span>
</a>
</li>
<li>
<a href="panSearch.html">
<i class="fa fa-cloud fa-lg"></i>
<span class="nav-text">网盘资源搜索</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-book fa-lg"></i>
<span class="nav-text">Book</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-envelope fa-lg"></i>
<span class="nav-text">Envelope</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-rocket fa-lg"></i>
<span class="nav-text">Rocket</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-code fa-lg"></i>
<span class="nav-text">Code</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-coffee fa-lg"></i>
<span class="nav-text">Coffee</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-compass fa-lg"></i>
<span class="nav-text">Compass</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-download fa-lg"></i>
<span class="nav-text">Download</span>
</a>
</li>
</ul>
</div>
</nav>
<div class="barrage-box">
<div class="barrage-content">
<!--<canvas id="canvas-1"></canvas>-->
<div class="barrage-road">
<span class="barrage">
测试弹幕.....
<!--<input class="starButton" type="button" value="">-->
<img src="pic/star-active.png" class="star-img" alt="">
<span class="star-num-text">0</span>
</span>
</div>
<div class="barrage-road">
</div>
<div class="barrage-road">
</div>
<div class="barrage-road">
</div>
<div class="barrage-road">
</div>
<div class="barrage-road">
</div>
<div class="barrage-road">
</div>
</div>
<div class="barrage-settings">
<!--<input class="text-size" type="range" max="100" min="0">-->
<input class="text-preview" type="button" value="Hello World">
<div class="range-slider">
<div class="range-slider-fill"></div>
<div class="range-slider-handle"></div>
</div>
<div style="margin-left: 5px">
<input type="radio" name="colorSelected" value="black">
<span style="color: black">黑色</span>
</div>
<div style="margin-left: 5px">
<input type="radio" name="colorSelected" value="red">
<span style="color: red">红色</span>
</div>
<div style="margin-left: 5px">
<input type="radio" name="colorSelected" value="green">
<span style="color: green">绿色</span>
</div>
<div style="margin-left: 5px">
<input type="radio" name="colorSelected" value="white" checked="checked">
<span style="color: white">白色</span>
</div>
<div style="margin-left: 10px">
<select class="speed-selector">
<option value="12" name="speedNum">请选择车速</option>
<option value="12" name="speedNum">8</option>
<option value="11" name="speedNum">7</option>
<option value="10" name="speedNum">6</option>
<option value="9" name="speedNum">5</option>
<option value="8" name="speedNum">4</option>
<option value="7" name="speedNum">3</option>
<option value="6" name="speedNum">2</option>
<option value="5" name="speedNum">1</option>
</select>
</div>
</div>
<div class="comment-box">
<input class="comment-input" type="text" placeholder="请输入待发送内容">
</div>
<div class="button-area">
<button class="send-button" onclick="addBarrageData()">发送弹幕</button>
</div>
</div>
<script type="text/javascript" src="script/index-2-pro.js?t=1.0.23"></script>
<ul class="right-menu-ul" style="display: none">
<li class="menu-item">举报当前弹幕</li>
</ul>
</body>
</html>
html代码没什么好说的，连这个都看不懂的话，下面的基本也没戏了。
重头戏js源码
- js这门语言的特点就是: 它的语义宽松，这也就导致了很多的js代码写出来显得杂乱无章，比如我这个。但是用熟练了以后，你就会发现它越用越上瘾。
 
"use strict";
var barrageContent = document.getElementsByClassName("barrage-content")[0];
// var rect = barrageContent.getBoundingClientRect();
/**
* 弹道
* @type {HTMLCollectionOf<Element>}
*/
var barrageRoad = document.getElementsByClassName("barrage-road");
var rangeValue = 20;//字体大小 预设值
var sliderHandle = document.getElementsByClassName("range-slider-handle")[0];//字体调节滑块
var slider = document.getElementsByClassName("range-slider")[0];
var sliderRect = slider.getBoundingClientRect();
var sliderFill = document.getElementsByClassName("range-slider-fill")[0];//滑过区域
var textPreview = document.getElementsByClassName("text-preview")[0];//预览字体区
var content = document.getElementsByClassName("comment-input")[0];//弹幕输入框
var speedNum = document.getElementsByClassName("speed-selector")[0];//弹幕速度
var color = document.getElementsByName("colorSelected");//弹幕颜色选择器
var colorSelected = "white";//被选择颜色 预设值
var transitionEvent = whichTransitionEvent();//判断浏览器内核类型
var index = 1;//数据库弹幕表分页页码
var deviceType = goPAGE();
var I = 0;//右键弹幕的id
sliderHandle.style.left = "0px";
/**
* 测试用数据 数据格式，我下面的源码获取数据是用的我自己建的后台，如果你只是想要一个单机版的话，直接添加下面数组里的初始化数据就行，每个字段都要。
* @type {*[]}
*/
var barrageData_2 = [
{
"barrageId": 1,
"content": "第二条弹幕.............",
"color": "red",
"speed": 16,
"textSize": 20,
"road": 0,
"starNum":0
}
];
barrageData_2 = barrageData_2.concat();
/**
* 初始化操作自执行函数
*/
(function () {
for (var i = 0; i < barrageData_2.length; i++) {
barrageData_2[i]["road"] = i % barrageRoad.length;
}
console.log("screen-size", screen.width, screen.height);
var that = this;
var timer = setInterval(function (args) {
if (barrageData_2.length <= 0) {
console.log("barrageData:", barrageData_2);
regularGetBarrage();
return;
}
sendBarrage(barrageData_2[0]["barrageId"], barrageData_2[0]["content"], barrageData_2[0]["color"], barrageData_2[0]["speed"], barrageData_2[0]["textSize"], barrageData_2[0]["road"]);
barrageData_2.splice(0, 1);
}, 1000);
})();
window.onload = function (ev) {
document.getElementsByClassName("menu-item")[0].onclick = report;//TODO
}
/**
* 鼠标指定弹幕事件函数
* @param event
*/
function onMouseIn(event) {
var barrage = event.valueOf();
var computeStyle = window.getComputedStyle(barrage), left = computeStyle.getPropertyValue("left");
barrage.style.left = left;
barrage.classList.remove("barrage-active");
}
/**
* 鼠标离开弹幕事件函数
* @param event
*/
function onMouseLeave(event) {
var barrage = event.valueOf();
barrage.classList.add("barrage-active");
}
/**
* 弹幕点击事件
* @param event
*/
function mouseClicked(event) {
var barrage = event.valueOf();
barrage.classList.add("barrage-clicked");
barrage.childNodes[1].setAttribute("src", "/pic/star-active.png");
barrage.childNodes[3].innerHTML = parseInt(barrage.childNodes[3].innerHTML) + 1;
star(barrage);
}
/**
* 弹幕发送处理函数
* @param index
* @param content 弹幕内容
* @param colorSelected 选择的颜色
* @param speedNum 弹幕速度
* @param rangeValue 字体大小
* @param roadNum 弹道
*/
function sendBarrage(barrageId, content, colorSelected, speedNum, rangeValue, roadNum) {
var newBarrage = document.createElement("span");
if (content === "") {
return;
}
newBarrage.classList.add("barrage");
newBarrage.style.setProperty("color", colorSelected);
newBarrage.style.transitionDuration = speedNum + "s";
newBarrage.style.webkitTransitionDuration = speedNum + "s";
newBarrage.style.setProperty("font-size", rangeValue + "px");
newBarrage.innerHTML = content + "<img src='pic/star.png' class='star-img' alt=''>" +
" <span class='star-num-text'>"+barrageData_2[0]["starNum"]+"</span><input type='text' hidden value="+barrageId+">";
newBarrage.onmouseenter = function (ev) {
onMouseIn(this);
};
newBarrage.onmouseleave = function (ev) {
onMouseLeave(this);
};
if (deviceType === "pc"){
newBarrage.onclick = function (ev) {
var ul = document.getElementsByClassName("right-menu-ul")[0];
ul.style.display = "none";
mouseClicked(this);
};
} else {
newBarrage.ontouchend = function (ev) {
var ul = document.getElementsByClassName("right-menu-ul")[0];
ul.style.display = "none";
mouseClicked(this);
}
}
newBarrage.oncontextmenu = function (ev) {
var ul = document.getElementsByClassName("right-menu-ul")[0];
// console.log("contextmenu", ev.currentTarget.valueOf().childNodes);
event.preventDefault();
//TODO 奇迹的用法
I = barrageId;
ul.style.display = "block";
ul.style.left = event.clientX + 10 + "px";
ul.style.top = event.clientY + 10 + "px";
};
//TODO 备注，dom初始化的时机
barrageRoad[roadNum].appendChild(newBarrage);
setTimeout(function () {
newBarrage.classList.add("barrage-active");
},50);
newBarrage.addEventListener(transitionEvent, function (evt) {
// console.log(this);
this.parentNode.removeChild(this);
// barrageData_2.splice(0, 1);
console.log("----------------------transitionEnd事件触发一次---------------");
});
}
/**
* 滑块鼠标按下事件函数
* @param event
*/
if (deviceType === "pc"){
sliderHandle.onmousedown = function (event) {
var that = this;
var oldX = event.clientX;
var left = parseInt(that.style.left);
document.onmousemove = function (ev) {
var x = ev.clientX - oldX;
that.style.left = left + x + "px";
rangeValue = Math.ceil((parseInt(that.style.left) / sliderRect.width) * 40) + 1;
if (parseInt(that.style.left) < 0) {
that.style.left = "0";
rangeValue = 10;
}
if (parseInt(that.style.left) > sliderRect.width) {
that.style.left = sliderRect.width - 10 + "px";
rangeValue = 50;
}
sliderFill.style.width = that.style.left;
textPreview.style.fontSize = rangeValue + "px";
console.log("rangeValue: ", rangeValue);
};
document.onmouseup = function (ev) {
document.onmouseup = null;
document.onmousemove = null;
}
};
} else {
sliderHandle.ontouchstart = function (event) {
var that = this;
var oldX = event.clientX;
var left = parseInt(that.style.left);
document.ontouchmove = function (ev) {
var x = ev.clientX - oldX;
that.style.left = left + x + "px";
console.log("left", that.style.left);
rangeValue = Math.ceil((parseInt(that.style.left) / sliderRect.width) * 40) + 1;
if (parseInt(that.style.left) < 0) {
that.style.left = "0";
rangeValue = 10;
}
if (parseInt(that.style.left) > sliderRect.width) {
that.style.left = sliderRect.width - 10 + "px";
rangeValue = 50;
}
sliderFill.style.width = that.style.left;
textPreview.style.fontSize = rangeValue + "px";
console.log("rangeValue: ", rangeValue);
};
document.ontouchend = function (ev) {
document.ontouchend = null;
document.ontouchmove = null;
}
};
}
/**
* 发送弹幕按钮点击事件响应函数
*/
function addBarrageData() {
var item = {
"content": "",
"color": "red",
"speed": 16,
"textSize": 20,
"road": 0,
"starNum": 0
};
var content_1 = content.value;
item["speed"] = speedNum.value;
item["textSize"] = rangeValue;
item["road"] = Math.floor(Math.random() * barrageRoad.length);
content_1 = contentFilter();
item["content"] = content_1;
console.log("content: ", content_1);
for (var i = 0;i<color.length;i++) {
if (color[i].checked) {
item["color"] = color[i].value;
break;
}
}
console.log("添加事件触发");
barrageData_2.push(item);
console.log("barrageData :", barrageData_2.length);
// content.value = "";
saveBarrage();
}
/**
* 右键菜单处理函数
*/
// document.oncontextmenu = function (event) {
//
// var ul = document.getElementsByClassName("right-menu-ul")[0];
//
// event.preventDefault();
//
// ul.style.display = "block";
// ul.style.left = event.clientX +"px";
// ul.style.top = event.clientY + "px";
//
// // return false;
// }
/**
* 全局点击事件重写
* @param e
*/
document.onclick = function (e) {
var ul = document.getElementsByClassName("right-menu-ul")[0];
ul.style.display = "none";
};
/**
* 举报弹幕响应函数
* @param id
*/
function report() {
// $.ajax({
// url: "/barrage/save",
// type: "post",
// dataType: "json",
// data: {
// "barrageSenderId": 1,
// "content": contentFilter(),
// "speed": speedNum.value,
// "color": function () {
// for (var i = 0; i < color.length; i++) {
// if (color[i].checked) {
// return color[i].value;
// }
// }
// },
// "textSize": rangeValue,
// "road": Math.floor(Math.random() * barrageRoad.length)
// },
// complete: function (ev) {
//
// }
// });
$.messager.show({
title: "提示消息",
msg: "举报成功:"+ I,
timeout: 5000
});
}
/**
* 发送的弹幕发送至服务器
*/
function saveBarrage() {
$.ajax({
url: "/barrage/save",
type: "post",
dataType: "json",
data: {
"barrageSenderId": 1,
"content": contentFilter(),
"speed":speedNum.value,
"color":function () {
for (var i = 0;i<color.length;i++){
if (color[i].checked){
return color[i].value;
}
}
},
"textSize": rangeValue,
"road": Math.floor(Math.random() * barrageRoad.length)
},
complete:function (ev) {
// console.log(ev);
content.value = "";
if (ev.status === 200){
console.log(ev.responseText);
}else{
console.log("error", ev.responseText);
}
}
});
}
/**
* 后台弹幕数据拉取函数
*/
function regularGetBarrage() {
$.ajax({
url: "/barrage/getData?index=" + index,
type: "get",
dataType: "json",
complete: function (ev) {
if (ev.status == 200) {
// console.log("regular", ev.responseText);
var data = JSON.parse(ev.responseText);
barrageData_2 = barrageData_2.concat(data["resultData"]["barrageInfoPage"]["content"]);
console.log("regular", barrageData_2);
index++;
// console.log(data["resultData"]["barrageInfoPage"]["content"]);
} else {
console.log("error", ev.responseText);
}
}
});
}
/**
* 弹幕点赞处理函数
* @param option
*/
function star(option) {
var barrageId = option.childNodes[4].value;
// console.log("star", option.childNodes);
$.ajax({
type: "get",
dataType: "json",
url: "/barrage/star?barrageId=" + barrageId,
complete: function (ev) {
if (ev.status == 200) {
$.messager.show({
title: "系统提示",
msg: "点赞成功",
timeout: 3000
});
console.log(ev.responseText);
}
}
});
}
/**
* 浏览器内核判断函数
* @returns {*}
*/
function whichTransitionEvent() {
var t;
var el = document.createElement('fakeelement');
var transitions = {
'transition': 'transitionend',
'OTransition': 'oTransitionEnd',
'MozTransition': 'transitionend',
'WebkitTransition': 'webkitTransitionEnd'
}
for (t in transitions) {
if (el.style[t] !== undefined) {
return transitions[t];
}
}
}
/**
* 输入内容过滤
*/
function contentFilter() {
var content_1 = content.value;
content_1 = content_1.replace(/<.*?>.*?<\/.*?>/g, '[非法字段]');
content_1 = content_1.replace(/<img/g, '[非法字段]');
content_1 = content_1.replace(/<script/g, '[非法字段]');
return content_1;
}
/**
*判断是否为移动端
*/
function goPAGE() {
if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
/*window.location.href="你的手机版地址";*/
// deviceType = "mobile";
return "mobile";
}
else {
/*window.location.href="你的电脑版地址"; */
// deviceType = "pc";
return "pc";
}
}
css代码
这个我就放github上算了，不然篇幅实在是太长了。
css代码地址
下一篇文章预告
实现一个基于springboot框架的注解方法跟踪小框架
4688
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
