纳裕 - 动画音画 - 花潮论坛 - Powered by Discuz! Archiver

马黑黑 发表于 2023-9-9 09:06

纳裕

本帖最后由马黑黑于 2023-9-9 09:13 编辑 <br /><br /><style>
#mydiv { margin: 0 0 0 calc(50% - 593px); display: grid; place-items: center; width: 1024px; height: 640px; border: 1px solid gray; background: url('https://638183.freep.cn/638183/t23/webp2/nayu.webp') no-repeat center/cover; overflow: hidden; z-index: 1; position: relative; --state: running; }
</style>

<div id="mydiv"></div>
<audio id="aud" src="https://yinpin.s3-us-east-1.ossfiles.com/nayu.mp3" crossorigin="anonymous" loop autoplay></audio>

<script>

(function() {

let appends = [];

let loadJs = (pa,src) => {
let script = document.createElement('script');
script.charset = 'utf-8';
script.src = src;
pa.appendChild(script);
appends.push(script);
}

loadJs(document.body,'https://638183.freep.cn/638183/web/api/xyanklet_lrc.js');
loadJs(document.body,'https://638183.freep.cn/638183/web/lizi/h5lz_01.js');

appends.onload = () => {
let geci = [,];
HCPlayer({
papa: '#mydiv',
lrcAr: geci,
lrc_css: 'top: 20px;',
fs_css: 'bottom: 70px; --bg: darkgray;',
player_css: `
bottom: 40px;
color: white;
--btnBg: url('https://638183.freep.cn/638183/t23/1/7sh-1.png') no-repeat center/cover;
--ww: 50%; --hh: 80px;
--track: lightgreen; --prog: purple;
`,
pinpu: {size: 2, gap: 0, color1: 'blue', color2: ''},
});
};

appends.onload = () => {
H5lz({
papa: '#mydiv',
total: 15,
size: {width: 120, height: 104},
shape: {background: 'url("https://638183.freep.cn/638183/t22/hl/kite1.gif")', borderRadius: '0'},
maxTime: 24,
offset: {x: 00, y: -300},
ani: 'toLeft',
});
};

})();

</script>

马黑黑 发表于 2023-9-9 09:09

本帖最后由马黑黑于 2023-9-9 09:13 编辑

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

let appends = [];

let loadJs = (pa,src) => {
   let script = document.createElement('script');
   script.charset = 'utf-8';
   script.src = src;
   pa.appendChild(script);
   appends.push(script);
}

loadJs(document.body,'https://638183.freep.cn/638183/web/api/xyanklet_lrc.js');
loadJs(document.body,'https://638183.freep.cn/638183/web/lizi/h5lz_01.js');

appends.onload = () => {
   let geci = [,];
   HCPlayer({
            papa: '#mydiv',
            lrcAr: geci,
            lrc_css: 'top: 20px;',
            fs_css: 'bottom: 70px; --bg: darkgray;',
            player_css: `
                     bottom: 40px;
                     color: white;
                     --btnBg: url('https://638183.freep.cn/638183/t23/1/7sh-1.png') no-repeat center/cover;
                     --ww: 50%; --hh: 80px;
                     --track: lightgreen; --prog: purple;
            `,
   pinpu: {size: 2, gap: 0, color1: 'blue', color2: ''},
   });
};

appends.onload = () => {
   H5lz({
            papa: '#mydiv',
            total: 15,
            size: {width: 120, height: 104},
            shape: {background: 'url("https://638183.freep.cn/638183/t22/hl/kite1.gif")', borderRadius: '0'},
            maxTime: 24,
            offset: {x: 00, y: -300},
            ani: 'toLeft',
   });
};
因为加载多个JS资源文档，就胡乱编写一个加载函数，没有用到具有回调功能的高阶函数，普普通通、老老实实的做法而已。

马黑黑 发表于 2023-9-9 09:10

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

H5粒子插件 (52qingyin.cn)

马黑黑 发表于 2023-9-9 09:20

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

<script src="https://638183.freep.cn/638183/web/api/xyanklet_lrc.js" charset="utf-8"></script>
<script src="https://638183.freep.cn/638183/web/lizi/h5lz_01.js" charset="utf-8"></script>

<script>

let geci = [,];

HCPlayer({
   papa: '#mydiv',
   lrcAr: geci,
   lrc_css: 'top: 20px;',
   fs_css: 'bottom: 70px; --bg: darkgray;',
   player_css: `
            bottom: 40px;
            color: white;
            --btnBg: url('https://638183.freep.cn/638183/t23/1/7sh-1.png') no-repeat center/cover;
            --ww: 50%; --hh: 80px;
            --track: lightgreen; --prog: purple;
   `,
   pinpu: {size: 2, gap: 0, color1: 'blue', color2: ''},
});

H5lz({
   papa: '#mydiv',
   total: 15,
   size: {width: 120, height: 104},
   shape: {background: 'url("https://638183.freep.cn/638183/t22/hl/kite1.gif")', borderRadius: '0'},
   maxTime: 24,
   offset: {x: 00, y: -300},
   ani: 'toLeft',
);

</script>

红影发表于 2023-9-9 09:21

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

马黑黑 发表于 2023-9-9 09:22

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

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

红影发表于 2023-9-9 09:22

奇怪，为什么飞一会就不见那些风筝了？{:4_203:}

红影发表于 2023-9-9 09:25

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

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

马黑黑 发表于 2023-9-9 09:25

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

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

红影发表于 2023-9-9 09:26

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

红影发表于 2023-9-9 09:29

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

还可以放两个插件进去，厉害了{:4_199:}

马黑黑 发表于 2023-9-9 09:36

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

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

马黑黑 发表于 2023-9-9 09:37

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

纳裕的台子要搭建好

马黑黑 发表于 2023-9-9 10:31

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

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

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

红影发表于 2023-9-9 14:27

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

还是第一次看到这样使用多个插件啊，谢谢黑黑{:4_187:}

红影发表于 2023-9-9 14:27

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

是的，得一会就好的事，是我太急了。{:4_173:}

红影发表于 2023-9-9 14:28

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

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

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

马黑黑 发表于 2023-9-9 15:04

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

总有些时候是这样

马黑黑 发表于 2023-9-9 15:05

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

额

马黑黑 发表于 2023-9-9 15:06

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

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

页: [1] 2 3 4 5 6 7 8 9

花潮论坛's Archiver

纳裕