-
Notifications
You must be signed in to change notification settings - Fork 13
/
Copy pathdouyudanmu.js
90 lines (86 loc) · 3.47 KB
/
douyudanmu.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
// ==UserScript==
// @name 斗鱼弹幕显示
// @namespace https://github.com/daochouwangu/douyudanmu/blob/master/douyudanmu.js
// @version 1.24
// @description 显示弹幕
// @supportURL https://github.com/daochouwangu/douyudanmu/issues
// @author lyb
// @compatible chrome
// @license MIT
// @icon https://www.douyu.com/favicon.ico
// @match http*://www.douyu.com/*
// ==/UserScript==
(function() {
'use strict';
var FONT_SIZE = 20 //字体的大小
var DANMU_PADDING = 10 //弹幕的宽度
var SPEED = 100 //弹幕速度
var MIN_TIME = 2000 //同一行的弹幕最小间隔时间,如果弹幕有重叠就增加这个值
var BEGIN_TOP = 10 //弹幕离最上方的距离
function initApplication(){
var startTime = 0
var prevTop = 0
var targetNode = document.getElementById('js-barrage-list');
var config = { attributes: false, childList: true, subtree: true };
var callback = function(mutationsList) {
for(var mutation of mutationsList) {
if(mutation.addedNodes[0]){
send(mutation.addedNodes[0].querySelector(".Barrage-content"));
}
}
};
var observer = new MutationObserver(callback);
observer.observe(targetNode, config);
//建立一个放弹幕的容器
var wrapper = document.querySelector("#douyu_room_normal_player_danmuDom")
//使用第一行弹幕的时间来控制弹幕的并发
function send(danmu) {
if(!danmu) return;
var dom = danmu.cloneNode(true)
var now = new Date()
var clientWidth = wrapper.clientWidth
var clientHeight = wrapper.clientHeight
var time = clientWidth / SPEED
dom.style.position = 'absolute'
dom.style.zIndex = '10000'
dom.style.transition = `transform ${time}s linear`
dom.style.transform = `translateX(${clientWidth}px)`
dom.style.fontSize = `${FONT_SIZE}px`
dom.style.fontWeight = '800'
if (!danmu.getAttribute('class').includes('color')){
dom.style.color = '#fff'
dom.style.textShadow = '#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0'
}
var top = BEGIN_TOP
if (startTime === 0 ) {
startTime = now
} else {
if(now - startTime <= MIN_TIME && prevTop + 2 * FONT_SIZE + DANMU_PADDING < clientHeight) {
top=prevTop + FONT_SIZE + DANMU_PADDING
prevTop = prevTop + FONT_SIZE + DANMU_PADDING
} else {
top=BEGIN_TOP
prevTop = BEGIN_TOP
startTime = now
}
}
dom.style.top = `${top}px`
wrapper.append(dom)
//弹幕滚动效果
setTimeout(function(){
var width = dom.clientWidth
dom.style.transform = `translateX(-${width}px)`
},0)
//垃圾回收
setTimeout(function(){dom.remove()},time * 1500)
}
}
var start = setInterval(function(){
var wrapper = document.querySelector("#douyu_room_normal_player_danmuDom")
var targetNode = document.getElementById('js-barrage-list');
if (wrapper && targetNode){
initApplication()
clearInterval(start)
}
},500)
})();