成吉思汗（碰撞小球+歌词同步演示）

马黑黑 · 发表于 2024-4-19 09:19

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2024-4-19 10:05 编辑

马黑黑 · 发表于 2024-4-19 09:22

本帖最后由马黑黑于 2024-4-19 10:05 编辑

完整代码

<style>

#papa { margin: 0 0 0 calc(50% - 721px); width: 1280px; height: 720px; background: url('https://638183.freep.cn/638183/t24/webp/ijsh.webp') no-repeat center/cover; display: grid; place-items: center; overflow: hidden; user-select: none; position: relative; }

#play { position: absolute; left: 230px; top: 120px; animation: rot 6s linear infinite var(--state); z-index: 9; cursor: pointer; }

#papa video { position: absolute; top: -200px; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; pointer-events: none; }

@Keyframes rot { to { transform: rotate(360deg); } }

</style>

</div>

//函数：加载JS资源

var loadJs = (file, callback) => {

var sc = document.createElement('script');

sc.src = file;

sc.charset = 'utf-8';

document.body.appendChild(sc);

sc.onload = () => callback();

};

var js1 = 'https://638183.freep.cn/638183/web/api/lrc.js';

var js2 = 'https://638183.freep.cn/638183/web/js/ball-lz.js';

//歌词js先加载并用回调方式配置参数

loadJs(js1, () => {

LRC({

papa: '#papa',

lrcAr: lrcAr,

btn: '#play',

lrc_css: 'top: 20px;',

});

//粒子js后加载,

loadJs(js2, () => {});

//配置粒子

var lz = {papa: '#papa', total: 40, maxsize: 20, speed: 1, move: true};

var lrcAr = [

[2.1,"林子祥 - 成吉思汗",7.6],

[17.02,"风沙之中追追赶赶",1.1],

[18.08,"彼此热烈在歌唱",2.2],

[21.05,"Ha hoo ha 不需担忧",3.0],

[24.06,"摔交饮酒彼此地上尽欢畅",3.2],

[28.01,"Ha hoo ha",2.0],

[30.04,"奔奔跑跑沙丘上马壮牛强",2.9],

[33.07,"威威风风马背上胸襟开朗",3.0],

[37,"我高声欢呼我是热与光",4.2],

[42.01,"Hoo ha",1.1],

[43.06,"成成成吉思汗",3.1],

[47,"生不怕死不怕天不怕天生英勇",3.0],

[50.03,"成成成吉思汗",2.6],

[53.06,"心向上心向上心向上坚心向上",3.5],

[57,"我决意他乡往",1.0],

[58.05,"WO hoo",2.0],

[60.02,"大地任我闯荡",1.0],

[61.07,"wo ha",2.0],

[63.05,"不可阻挡我愿独霸一方",5.2],

[70.03,"成成成吉思汗",2.4],

[73.03,"生不怕死不怕天不怕天生英勇",3.0],

[76.06,"成成成吉思汗",2.9],

[79.08,"心向上心向上心向上坚心向上",3.9],

[83.02,"我决意他乡往",1.0],

[84.07,"WO hoo",2.0],

[86.04,"大地任我闯荡",1.0],

[87.08,"wo ha",2.0],

[89.08,"不可阻挡只想我是王",4.2],

[96.02,"风沙之追追赶赶",1.0],

[97.07,"彼此热烈在歌唱",2.4],

[100.05,"Ha hoo ha 不需担忧",3.0],

[103.05,"摔交饮酒彼此地上尽欢畅",3.0],

[106.1,"Ha hoo ha",2.9],

[109.03,"奔奔跑跑沙丘上马壮牛强",2.8],

[112.06,"威威风风马背上胸襟开朗",2.9],

[115.09,"我高声欢呼我是热与光",5.2],

[121,"Hoo ha",1.1],

[122.06,"成成成吉思汗",2.7],

[125.1,"生不怕死不怕天不怕天生英勇",3.6],

[129.03,"成成成吉思汗",2.5],

[132.06,"心向上心向上心向上坚心向上",2.5],

[135.09,"我决意他乡往",2.0],

[137.05,"WO hoo",2.0],

[139.01,"大地任我闯荡",1.1],

[140.06,"wo ha",2.0],

[142.04,"不可阻挡我愿独霸一方",5.2],

[149.01,"成成成吉思汗",2.3],

[152.02,"生不怕死不怕天不怕天生英勇",3.0],

[155.06,"成成成吉思汗",3.0],

[158.08,"心向上心向上心向上坚心向上",3.6],

[162.02,"我决意他乡往",1.1],

[163.08,"WO hoo",2.0],

[165.04,"大地任我闯荡",1.2],

[167,"wo ha",1.1],

[168.08,"不可阻挡力量服四方",4.0],

[172.1,"hoo ha hoo",2.4]

];

papa.onclick = () => lz.move = !aud.paused; //控制粒子

</script>

马黑黑 · 发表于 2024-4-19 09:47

重要说明：

（一）CSS

播放器元素需要提升元素Z轴上的层级级别，代码在第 3 行，z-index: 9;。一般来说，如果其他元素设置了 z-index，且可能会出现在播放器元素的范围，则其他元素的 z-index 不能大于播放器元素的 z-index，当然，通过HTML代码流的次序关系，让播放器元素在最后加载，也能确保 z-index 保持在较高的层级，除非在CSS里设置了其他元素的z-index。

视频应阻止UI交互功能，代码在第 4 行，pointer-events: none; 这句必须存在。这样设置可以，一是令小球粒子的点击交互不受视频拦截，二是右击帖子的鼠标操作菜单由画布接管从而避免可能存在的对视频的进一步操作。

（二）HTML

视频标签 video 可以不设置 autoplay 属性，因为在 lrc.js 插件里已经全方位接管了帖子的所有视频的播放/暂停操作。

（三）JS

我使用回调函数加载两个JS资源文档，写了一个简短的 loadJS(file, callback) 函数。加载JS资源讲究次序，先加载 lrc.js，并通过回调方式配置lrc歌词相关参数；再加载 ball-lz.js，该资源不是插件，所以配置粒子不能通过回调方式实现而是单独配置，加载 ball-lz.js 时就给一个空的回调函数（代码第 39 行）。

ball-lz.js 需要粒子对象 lz 的键值对 move: true/false 做小球运动与否的开关，开关的控制 lrc.js 不存在，所以自己想办法，可以利用帖子容器元素的点击操作来完成。父子关系的元素，在子元素上点击会冒泡到父元素，所以，点击小球也好，点击播放器元素也好，帖子容器元素 papa 都会知道“我被点击了”，然后它依据 audio 控件的暂停与否来控制 lz.move 开关（代码第 102 行）。