ball-lz.js使用说明
位置:
首页 >
JS插件[ 发布时间: 2024.4.15 作者: 马黑 阅读: 219 ]
资源地址： https://638183.freep.cn/638183/web/js/ball-lz.js
引用与配置：
let sF = document.createElement('script');
sF.charset = 'utf-8';
sF.src = 'https://638183.freep.cn/638183/web/js/ball-lz.js';
document.body.appendChild(sF);
/* 配置 lz
papa - 粒子容器，有id的带 # 号，class的带 . 号，可以是 'body'
total - 小球总数
maxsize - 小球最大直径
speed - 小球运行步幅，可选参数，缺省为 1
opacity - 小球透明度，可选参数，缺省为 0.8，取值在 0~1 之间，0 完全透明，1不透明
move - 小球运行开关，设为 true、false 都可以
*/
let lz = {papa: '#papa', total: 100, maxsize: 20, speed: 1, opacity: 0.6, move: false};
粒子容器是 div 等元素时，粒子仅在该元素范围内运行，默认情况下小球具备点击功能。当容器是 'body' 时，粒子将以全页背景渲染，这时需要处理好页面各元素间的层级（z-index）关系，一般建议牺牲小球的点击功能，将 canvas 元素设置为略高的层级，同时令之没有点击功能（pointer-events: none），这样画布就不会影响页面其他元素的交互。下面给出一个完整的帖子示例，示例以全页背景做粒子渲染：
<style>
#papa { margin: 20px auto; width: 1000px; height: 666px; background: url('https://638183.freep.cn/638183/t24/webp/fguj.webp') no-repeat center/cover; z-index: 1; position: relative; }
#play { position: absolute; width: 100px; left: calc(50% - 50px); top: 20px; opacity: .7; cursor: pointer; z-index: 100; animation: rot 5s linear infinite var(--state); }
canvas { z-index: 99; pointer-events: none; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1351763578" loop></audio>
<img id="play" src="https://638183.freep.cn/638183/small/ujye.webp" alt="" />
</div>
<script>
let pa, num; //pa 为容器变量，num 为粒子总数
let sF = document.createElement('script');
sF.charset = 'utf-8';
sF.src = 'https://638183.freep.cn/638183/web/js/ball-lz.js';
document.body.appendChild(sF);
/* 检查物理分辨率
宽度小于 1024px 时帖子元素做粒子容器、粒子总数 40个
否则，body 做粒子容器、粒子总数 100 个
*/
screen.width <= 1024 ? (pa = '#papa', num = 40) : (pa = 'body', num = 100);
//配置粒子
let lz = {papa: pa, total: num, maxsize: 20, move: false};
//联动函数
let mState = () => {
lz.move = !aud.paused;
papa.style.setProperty('--state', ['paused','running'][+lz.move]);
}
//检查可否自动播放音频
aud.play().then(() => {
mState(); //能自动播放时运行联动函数
}).catch(err => {
//不允许自动播放时以静音方式播放音频
if (err.name === "NotAllowedError") {
aud.muted = true;
aud.play();
} else {
alert(err); //音频资源相关错误弹出警告
}
mState(); //运行联动函数
});
//按钮点击事件
play.onclick = () => {
aud.paused ? aud.play() : aud.pause(); //播放或暂停音乐
mState(); //运行联动函数
}
//页面任意地方点击时关闭audio静音
document.onclick = () => aud.muted ? aud.muted = false : '';
</script>
前一篇: 全屏插件使用说明及示例
下一篇: dot-lz.js使用说明
发表评论:
评论列表 [4条]
#4 | 悄然 于 2024-4-16 18:06 发布: 老师动作好快，我这就去试一下新的效果。。
#3 | 马黑 于 2024-4-16 13:09 发布: 现在可以了，本文也做了相应修改。
#2 | 马黑 于 2024-4-16 12:22 发布: 不能，权限没有开放。需要透明度小球的得重写 ball-lz.js 的颜色机制。
#1 | 了了 于 2024-4-16 12:19 发布: let lz = {papa: '井papa', total: 100, maxsize: 20, speed: 1, move: false};
这一串这么好用。。问一下，能不能加上一下透明度设置呢。。
