ball-lz.js使用说明

位置: 首页 > JS插件
[发布: 2024.4.15 作者: 马黑阅读: 299]

资源地址： 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>

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}; 这一串这么好用。。问一下，能不能加上一下透明度设置呢。。