纳裕

马黑黑

马黑黑

本帖测试 H5粒子插件 + 播放器插件的结合使用，帖子的JS代码如下：

1. let appends = [];
   
2. 
   
3. let loadJs = (pa,src) => {
   
4.         let script = document.createElement('script');
   
5.         script.charset = 'utf-8';
   
6.         script.src = src;
   
7.         pa.appendChild(script);
   
8.         appends.push(script);
   
9. }
   
10. 
    
11. loadJs(document.body,'https://638183.freep.cn/638183/web/api/xyanklet_lrc.js');
    
12. loadJs(document.body,'https://638183.freep.cn/638183/web/lizi/h5lz_01.js');
    
13. 
    
14. appends[0].onload = () => {
    
15.         let geci = [[2,"纳裕",4],[7,"",1]];
    
16.         HCPlayer({
    
17.                 papa: '#mydiv',
    
18.                 lrcAr: geci,
    
19.                 lrc_css: 'top: 20px;',
    
20.                 fs_css: 'bottom: 70px; --bg: darkgray;',
    
21.                 player_css: `
    
22.                         bottom: 40px;
    
23.                         color: white;
    
24.                         --btnBg: url('https://638183.freep.cn/638183/t23/1/7sh-1.png') no-repeat center/cover;
    
25.                         --ww: 50%; --hh: 80px;
    
26.                         --track: lightgreen; --prog: purple;
    
27.                 `,
    
28.         pinpu: {size: 2, gap: 0, color1: 'blue', color2: ''},
    
29.         });
    
30. };
    
31. 
    
32. appends[1].onload = () => {
    
33.         H5lz({
    
34.                 papa: '#mydiv',
    
35.                 total: 15,
    
36.                 size: {width: 120, height: 104},
    
37.                 shape: {background: 'url("https://638183.freep.cn/638183/t22/hl/kite1.gif")', borderRadius: '0'},
    
38.                 maxTime: 24,
    
39.                 offset: {x: 00, y: -300},
    
40.                 ani: 'toLeft',
    
41.         });
    
42. };

复制代码

因为加载多个JS资源文档，就胡乱编写一个加载函数，没有用到具有回调功能的高阶函数，普普通通、老老实实的做法而已。

马黑黑

H5粒子插件相关说明请移步：

H5粒子插件 (52qingyin.cn)

马黑黑

如果站点支持直接引用JS资源文档，帖子调用与配置插件可以这么写：

1. <script src="https://638183.freep.cn/638183/web/api/xyanklet_lrc.js" charset="utf-8"></script>
   
2. <script src="https://638183.freep.cn/638183/web/lizi/h5lz_01.js" charset="utf-8"></script>
   
3. 
   
4. <script>
   
5. 
   
6. let geci = [[2,"纳裕",4],[7,"",1]];
   
7. 
   
8. HCPlayer({
   
9.         papa: '#mydiv',
   
10.         lrcAr: geci,
    
11.         lrc_css: 'top: 20px;',
    
12.         fs_css: 'bottom: 70px; --bg: darkgray;',
    
13.         player_css: `
    
14.                 bottom: 40px;
    
15.                 color: white;
    
16.                 --btnBg: url('https://638183.freep.cn/638183/t23/1/7sh-1.png') no-repeat center/cover;
    
17.                 --ww: 50%; --hh: 80px;
    
18.                 --track: lightgreen; --prog: purple;
    
19.         `,
    
20.         pinpu: {size: 2, gap: 0, color1: 'blue', color2: ''},
    
21. });
    
22. 
    
23. H5lz({
    
24.         papa: '#mydiv',
    
25.         total: 15,
    
26.         size: {width: 120, height: 104},
    
27.         shape: {background: 'url("https://638183.freep.cn/638183/t22/hl/kite1.gif")', borderRadius: '0'},
    
28.         maxTime: 24,
    
29.         offset: {x: 00, y: -300},
    
30.         ani: 'toLeft',
    
31. );
    
32. 
    
33. </script>

复制代码

红影

这个是实例呢，原来调整一下Y值就可以让粒子斜向飞呢。有实例更清楚了

马黑黑

红影 发表于 2023-9-9 09:21
这个是实例呢，原来调整一下Y值就可以让粒子斜向飞呢。有实例更清楚了

offset偏移量参数的作用就是微调方向

红影

奇怪，为什么飞一会就不见那些风筝了？

红影

马黑黑 发表于 2023-9-9 09:22
offset偏移量参数的作用就是微调方向

奇怪，刷新了一下怎么看不到效果了？

马黑黑

红影 发表于 2023-9-9 09:22
奇怪，为什么飞一会就不见那些风筝了？

这种情况估计与音乐资源有关，硬刷新吧

红影

哦，硬刷新了一下，又看到了。这个真漂亮，背景也很奇特

红影

马黑黑 发表于 2023-9-9 09:22
offset偏移量参数的作用就是微调方向

还可以放两个插件进去，厉害了

马黑黑

红影 发表于 2023-9-9 09:29
还可以放两个插件进去，厉害了

理论上放多少个都不是问题。论坛自身就有很多插件。

马黑黑

红影 发表于 2023-9-9 09:26
哦，硬刷新了一下，又看到了。这个真漂亮，背景也很奇特

纳裕的台子要搭建好

马黑黑

红影 发表于 2023-9-9 09:25
奇怪，刷新了一下怎么看不到效果了？

有时候需要硬刷新，尤其当如下情况发生：

资源文档有过缓存但现在有了新的资源；
缓存障碍；
资源文件尚未下载完毕、缓冲中；
…………

红影

马黑黑 发表于 2023-9-9 09:36
理论上放多少个都不是问题。论坛自身就有很多插件。

还是第一次看到这样使用多个插件啊，谢谢黑黑

红影

马黑黑 发表于 2023-9-9 09:37
纳裕的台子要搭建好

是的，得一会就好的事，是我太急了。

红影

马黑黑 发表于 2023-9-9 10:31
有时候需要硬刷新，尤其当如下情况发生：

资源文档有过缓存但现在有了新的资源；

嗯嗯，现在知道的，硬刷新有时才是有效的。比如上传头像后，想当场看到就需要硬刷新。

马黑黑

红影 发表于 2023-9-9 14:28
嗯嗯，现在知道的，硬刷新有时才是有效的。比如上传头像后，想当场看到就需要硬刷新。

总有些时候是这样

马黑黑

红影 发表于 2023-9-9 14:27
是的，得一会就好的事，是我太急了。

额

马黑黑

红影 发表于 2023-9-9 14:27
还是第一次看到这样使用多个插件啊，谢谢黑黑

插件就这么用的，可以有斧头插件、刮鱼鳞插件、锤子插件什么的，没规定说那个锤子不能用