jquery使用danmaku.js插件实现弹幕效果

qfCSDN

已于 2024-01-20 22:25:03 修改

阅读量623

点赞数

分类专栏： jquery 文章标签：前端 jquery

于 2022-07-28 18:28:41 首次发布

本文链接：https://blog.csdn.net/qfCSDN/article/details/126041063

版权

jquery 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

这篇博客介绍了如何利用HTML、JavaScript和Danmaku.js插件在网页上创建弹幕效果。首先在HTML中设置id为'page-root'的元素作为插件的基础，并引入danmaku.js和自定义的index.js。然后创建弹幕容器，并在JavaScript中初始化弹幕实例，设置弹幕数据，包括用户名称、头像和礼物图片。通过定时器每2秒展示一条弹幕，同时提供了添加新弹幕的功能。

摘要由CSDN通过智能技术生成

引入插件

index.html:
//标签加id="page-root"，用于插件获取根字体大小
<html lang="en" id="page-root">
<script src="./js/danmaku.js"></script>
//别忘了自己的js页面
<script src="./js/index.js"></script>

准备弹幕容器

index.html:
<div id="my_container"></div>

实现效果

index.js：
$(function () {
       initDanmu();
       setDanmuData();
})
//准备的弹幕数据
let damuPool = [
        { name1:'发文件哦我哦我回家哦',name2:'发v可发货v每次上课',tx1: './images/tx.jpg', tx2:'./images/tx.jpg',gift:'./images/cp/gift.png' },
        { name1:'那一天一体化不会同意',name2:'吃吧读个瑞哥让',tx1: './images/tx.jpg', tx2:'./images/tx.jpg',gift:'./images/cp/gift.png' },
        { name1:'我确认你好体育课iu',name2:'留挂号费大V擦深V大',tx1: './images/tx.jpg', tx2:'./images/tx.jpg',gift:'./images/cp/gift.png' },
        { name1:'cbru7yi范围及天气',name2:'feryhynb8bj57u6b67h',tx1: './images/tx.jpg', tx2:'./images/tx.jpg',gift:'./images/cp/gift.png' }
        ]
let danmu = []
// 初始化
let danmaku
const initDanmu = () => {
    danmaku = new Danmaku({
        container: document.getElementById('my_container'),
        speed: 50,
    })
}
const setDanmuData = () => {
        setInterval(() => {
            if (!danmu.length) {
                danmu = [...damuPool]
                // console.log(danmu);
            }
            let danmushoot = danmu.shift();
            if (danmushoot) {
                renderDM(danmushoot);
            }
        }, 2000);
}

const renderDM = (item) => {
    danmaku.emit({
        render: function () {
            var $div = document.createElement('div');
            var $div1 = document.createElement('div');
            var $img1 = document.createElement('img');
            var $img2 = document.createElement('img');
            var $img3 = document.createElement('img');
            var $div2 = document.createElement('div');
            var $p1 = document.createElement('p');
            var $p2 = document.createElement('p');
            $img1.src = item.tx1;
            $img2.src = item.gift;
            $img3.src = item.tx2;
            $p1.innerHTML = item.name1.length > 7 ? item.name1.slice(0, 7) + '...' : item.name1;
            $p2.innerHTML = item.name2.length > 7 ? item.name2.slice(0, 7) + '...' : item.name2;
            //先写好样式，添加的时候直接复制css
            $div.style = `width: 6.2666666667rem; height: 4rem; background: url(./images/cp/cpBg.png) no-repeat; background-size: 100% 100%; overflow: hidden;`;
            $div1.style = `display: flex;align-items: center;justify-content: center;margin: 0.92rem auto 0;`;
            $img1.style = `width: 1.32rem;height: 1.32rem;box-sizing: border-box;border: 0.0266666667rem solid #fdf7c3;border-radius: 50%;`;
            $img2.style = `width: 1.2533333333rem;`;
            $img3.style = `width: 1.32rem;height: 1.32rem;box-sizing: border-box;border: 0.0266666667rem solid #fdf7c3;border-radius: 50%;`;
            $div2.style = `display: flex;align-items: center;justify-content: center;margin: 0.0666666667rem auto 0;`;
            $p1.style = `width: 2.6666666667rem;height: 0.5333333333rem;background: url(./images/nameBg2.png) no-repeat;background-size: 100% 100%;font-size: 0.32rem;font-weight: 500;color: #FFFFFF;line-height: 0.5066666667rem;text-align: center;`;
            $p2.style = `width: 2.6666666667rem;height: 0.5333333333rem;background: url(./images/nameBg2.png) no-repeat;background-size: 100% 100%;font-size: 0.32rem;font-weight: 500;color: #FFFFFF;line-height: 0.5066666667rem;text-align: center;`;

            $div.appendChild($div1);
            $div1.appendChild($img1);
            $div1.appendChild($img2);
            $div1.appendChild($img3);
            $div.appendChild($div2);
            $div2.appendChild($p1);
            $div2.appendChild($p2);
            return $div;
        },
    })
}

// 发送弹幕
$('.myqs').click(() => {
    damuPool.push({
		name1:'dsfkjwjflksdhglkahdlksg',
		name2:'eityjnbmcnfhgkjvnxzc',
		tx1: './images/tx.jpg', 
		tx2:'./images/tx.jpg',
		gift:'./images/cp/gift.png'
    })
    setDanmuData();
})