【油猴脚本】增强了一下linux.do弹幕插件,大家看看效果如何,提供源码

[mzzsfy]

具体改动如下说明:

1. 弹幕设置了穿透属性,不再影响鼠标操作了
2. 弹幕改为透明,增加互动性的同时不影响阅读
3. 弹幕填充位置为全屏
4. 优化了默认弹幕

还有啥建议吗?优化了再发出来

原主题:

【油猴脚本】Linux.do论坛可以刷弹幕了！

看论坛是否感觉枯燥，是否感觉缺少氛围？ 论坛弹幕来了，欢迎体验。 还不是很完善，有一些问题。 欢迎各位大佬帮忙修改。 我算抛砖引玉了。 欢迎点赞。 体验地址：

源码，欢迎魔改

// ==UserScript== // @name linux.do弹幕 // @namespace linux.do弹幕氛围 // @version 0.6.2 /…

[unique]

好东西好东西

[smooth]

花里胡哨，好

[Tzeao (君子慎独)]

好，越花里胡哨也不错

[mzzsfy]

提供源码,可以替换体验下

源码

(function () {
‘use strict’;

// 创建弹幕容器
const danmuContainer = document.createElement('div');
danmuContainer.id = 'danmu-container';
danmuContainer.style.position = 'fixed';
danmuContainer.style.left = '0';
danmuContainer.style.bottom = '0';
danmuContainer.style.width = '100%'; // 容器宽度
danmuContainer.style.height = '100%';
danmuContainer.style.zIndex = '9999';
danmuContainer.style.overflow = 'hidden';
danmuContainer.style.opacity = '0.35';
danmuContainer.style["pointer-events"]="none";
document.body.appendChild(danmuContainer);

// 弹幕数组
let danmus = [];

// 添加弹幕
function addDanmu(text) {
    if(text.length>100){
      text=text.substring(0,98)+".."
    }
    const danmu = document.createElement('div');
    danmu.className = 'danmu';
    danmu.textContent = text;
    danmu.style.position = 'absolute';
    danmu.style.whiteSpace = 'nowrap';
    danmu.style.color = getRandomColor(); // 随机颜色
    danmu.style.fontSize = '20px';
    danmu.style.fontWeight = 'bold';
    danmu.style.left = getRandomPx();
    danmu.style.bottom = '0'; // 弹幕从底部进入
    danmu.style.writingMode = 'vertical-lr'; // 文字竖直显示
    danmu.style.transform = 'translateX(-100%)'; // 初始位置在容器外
    danmuContainer.appendChild(danmu);

    // 弹幕动画
    const pageHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
    const duration = Math.random() * (pageHeight * 7) + pageHeight * 3; // 随机动画持续时间，基于页面高度
    danmu.animate([
        { transform: `translateY(-${pageHeight}px)` } // 向上移动直到消失
    ], {
        duration: duration,
        iterations: 1,
        easing: 'linear'
    }).finished.then(() => danmu.remove());

    // 更新弹幕位置
    updateDanmuPositions();
}

// 更新弹幕位置，防止重叠
function updateDanmuPositions() {
    let lastBottom = 0; // 初始化上一个弹幕的底部位置
    danmus.forEach(danmu => {
        danmu.style.bottom = `${lastBottom}px`;
        lastBottom = parseFloat(danmu.style.bottom) + danmu.offsetHeight + 20; // 更新下一个弹幕的位置
    });
}

// 生成随机颜色
function getRandomColor() {
    const letters = '0123456789ABCDEF';
    let color = '#';
    for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}
// 获取弹幕数据

function fetchDanmuData() {
const currentUrl = window.location.href;
const jsonUrl = currentUrl.endsWith(‘.json’) ? currentUrl : currentUrl + ‘.json’;
fetch(jsonUrl)
.then(response => response.json())
.then(data => {
if (data && data.post_stream && data.post_stream.posts) {
const posts = data.post_stream.posts;
let postIndex = 1; // 从第二条开始
function addDanmuWithDelay() {
if (postIndex < posts.length) {
const post = posts[postIndex++];
const cookedContent = post.cooked.replace(/<[^>]*>?/gm, ‘’); // 移除HTML标签
addDanmu(cookedContent);
setTimeout(addDanmuWithDelay, 1000); // 每次添加后间隔0.2秒
}
}
addDanmuWithDelay(); // 开始添加弹幕
}
})
.catch(error => {
console.error(‘Error fetching danmu data:’, error);
});
}

// 生成随机位置
function getRandomPx() {
    const randomNumber = Math.floor(Math.random() * document.body.scrollWidth / 20 - 1)+1; // 生成1到5的随机数
    return randomNumber * 20 + 'px'; // 添加单位px并返回
}


function randomDo(fn,f=0.2){
  if(Math.random()<f){fn()}
}
// 每隔一段时间添加一个新的弹幕
setInterval(() => {
    if( danmus.length <20){
      randomDo(()=>addDanmu('吾皇万岁!'));
      randomDo(()=>addDanmu('666'));
      randomDo(()=>addDanmu('欢迎来到Linux.do!'));
      randomDo(()=>addDanmu('欢迎欢迎'));
      randomDo(()=>addDanmu('感谢各位'));
      randomDo(()=>addDanmu('始皇牛牛牛！'));
      randomDo(()=>addDanmu('大佬牛逼'));
      randomDo(()=>addDanmu('我是气氛组~'));
      randomDo(()=>addDanmu('感谢各位捧场'));
      randomDo(()=>addDanmu('吾皇万睡！'));
      randomDo(()=>addDanmu('吾皇牛掰,膜拜！'));
      randomDo(()=>addDanmu('充满了欢乐的氛围~'));
      randomDo(()=>addDanmu("Let's do it with linux"));
      randomDo(()=>addDanmu('百尺竿头，更进一步！'))
      randomDo(()=>addDanmu('好东西,凑个热闹~'))
      randomDo(()=>addDanmu('学到了,真不错啊~'))
      randomDo(()=>addDanmu('进来看看~'))
      randomDo(()=>addDanmu('找个位置随便坐'))
      randomDo(()=>addDanmu('精彩精彩'))
      randomDo(()=>addDanmu('我也来凑个热闹'))
      randomDo(()=>addDanmu("呜呼~"))
      randomDo(()=>addDanmu('帅!!!!'))
    }
}, 2000);
fetchDanmuData();

setInterval(() => {fetchDanmuData(); }, 20000);

function monitorTopicURLChange(callback) {
    const urlPattern = /^(https:\/\/linux\.do\/t\/topic\/\d+).*$/; // 正则表达式匹配基本URL
    let lastMatch = location.href.match(urlPattern);
    new MutationObserver(() => {
        const currentMatch = location.href.match(urlPattern);
        if (currentMatch && (!lastMatch || currentMatch[1] !== lastMatch[1])) {
            lastMatch = currentMatch;
            callback(currentMatch[1]);
        }
    }).observe(document, { subtree: true, childList: true });
}

// 使用示例
monitorTopicURLChange(newBaseURL => {
    fetchDanmuData();
});
observer.observe(document.body, { childList: true, subtree: true });
window.addEventListener('load', fetchDanmuData);
// 监听弹幕容器的大小变化，更新弹幕位置
new ResizeObserver(updateDanmuPositions).observe(danmuContainer);

})();

[AceyKubbo (Kubbo)]

good idea~

[delph1s]

继承hua佬衣钵

[baipiaodang (C)]

great

[mzzsfy]

有没有啥建议啊,我想做个滚动速度设置和透明度设置

[PlayMcBKuwu (安堂 なつみ)]

建议改成横屏和数据库支持让 LINUX DO 变成 cilicili / lililili（

[NullUser (用户已注销)]

搞得不错

[mzzsfy]

有道理,加个横竖屏选项

[suhaoxu]

大佬加个横竖屏选项

[scottluo]

花里胡哨

[handsome (大帅哥)]

太花里胡哨了

[whoami]

感谢分享