H5粒子插件2d版文档
本帖最后由 马黑黑 于 2023-9-15 11:02 编辑 <br /><br /><style>.mydiv { padding: 10px; }
.mydiv > p { margin: 10px 0; }
.code { tab-size: 4; font: normal 14px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; background: #efefef; padding: 10px; white-space: pre-wrap; word-break: break-word; }
.zs { color: green; }
.myred { color: red; }
</style>
<div class="mydiv">
<p>【提示】插件若有更新，将第一时间发布在 http://mhh.52qingyin.cn/art/show.php?st=2&sd=2&art=mahei_1694186574，若访问该文档，可按 Ctrl + F5 查看更新状况。</p>
<p>一、配置代码</p>
<pre class="code"><script>
let jf = document.createElement('script');
jf.src = 'https://638183.freep.cn/638183/web/lizi/<span class="myred">h5lz_2d.js</span>';
document.body.appendChild(jf);
jf.onload = () => {
H5lz({
papa: '#mydiv',<span class="zs"> /* 指定粒子的父元素 */</span>
total: 100,<span class="zs"> /* 粒子数量 */</span>
size: {width: 15, height: 15},<span class="zs"> /* 粒子宽高 */</span>
shape: {background: '', borderRadius: ''},<span class="zs"> /* 粒子背景和圆角（缺省或空值时插件自行配置） */</span>
maxTime: 24,<span class="zs"> /* 粒子运动最大周期时长 */</span>
offset: {x: 0, y: 0},<span class="zs"> /* 粒子运动横、纵偏移量 */</span>
ani: 'toBottom',<span class="zs"> /* 粒子运动名称（由插件提供，大小写敏感） */</span>
css: 'opacity: .7;',<span class="zs"> /* 粒子特殊CSS样式，缺省或空值放弃设置 */</span>
});
};
</script>
</pre>
<p>二、配置说明</p>
<p>配置在资源文档加载后由 H5lz({}) 进行配置，配置代码写在花括号内，共八个参数：</p>
<p class="myred">① papa</p>
<p>指定需要显示粒子的元素，值为字符串值（需要引号包裹值，下同），具体值为 id 或 class 表达法，例如：</p>
<pre class="code"> <div id="mybox"></div></pre>
<p>则，papa 配置这么写：</p>
<pre class="code"> papa: '#mybox',</pre>
<p>而：</p>
<pre class="code"> <div class="mybox"></div></pre>
<p>则，papa 这么配置：</p>
<pre class="code"> papa: '.mybox',</pre>
<p>注意，当使用 class 时，插件只作用于第一个 class=“xx" 的元素。</p>
<p>当 papa 参数未指定，插件将作用于 body，且当 body 的高度低于浏览器视口高度是，插件将对 body 做如下设置：其一，body 的高度为视口高度；其二，滚动条设置为 hidden。</p>
<p class="myred">② total</p>
<p>设置粒子总数，值为数值（不能用引号包裹值，下同）。缺省将由插件自行设置。由于使用关键帧驱动，粒子总数对资源的消耗不明显，可以根据需要大胆设置，但不应过分。</p>
<p class="myred">③ size</p>
<p>粒子尺寸，值为 Object 对象，需要花括号包裹个键值对（下同）。键值对共两组，健名分别是 width 和 height，分别指向粒子的宽、高，键值为数值，键值对之间用小角逗号隔开：</p>
<pre class="code"> size: {width: 10, height: 10},</pre>
<p>缺省则由插件自行配置。</p>
<p class="myred">④ shape</p>
<p>配置粒子形状，值为 Object 对象，共两个键值对，健名是 background 和 borderRadius（注意大小写）。其中，background 是粒子的背景设置，支持颜色表达、渐变背景、图片背景；borderRadius 对应 CSS的 border-radius 属性。键值均为字符串值。</p>
<p class="myred">⑤ maxTime</p>
<p>设置关键帧动画最高周期运行时长，对应的是 duration 属性，数值。设置此值，每一个粒子的一个运动周期都将在它的一半到它的本值之间选择一个数值。</p>
<p class="myred">⑥ offset</p>
<p>粒子运动偏移量配置，值为 Object 对象，两个子对象，x 指水平方向偏移量，作用于上、下运动的粒子；y 值垂直方向偏移量，作用于左、有运动的粒子。x、y 偏移量值为数值，支持正、负数。</p>
<p>偏移量对粒子运动的作用，表现在粒子朝东、南、西、北运动是或向上、向下、向左、向右偏移。</p>
<p class="myred">⑦ ani</p>
<p>指定动画方向，字符串值，由插件指定，当前可选值六个——</p>
<pre class="code"> 其一，自上而下：toBottom <span class="zs"> /* 【例】ani: 'toBottom', */</span>
其二，自下而上：toTop <span class="zs"> /* 【例】ani: 'toTop', */</span>
其三，自左向右：toRight <span class="zs"> /* 【例】ani: 'toRight', */</span>
其四，自右向左：toLeft <span class="zs"> /* 【例】ani: 'toLeft', */</span>
其五，由里往外：c2Out <span class="zs"> /* 【例】ani: 'c2Out', */</span>
其六，由外往里：out2C <span class="zs"> /* 【例】ani: 'out2C', */</span>
</pre>
<p class="myred">⑧ css</p>
<p>配置特殊需求的粒子CSS样式，使用CSS语法书写，所配置的属性应避免与粒子前述相关设置冲突。例如，设置透明度和阴影：</p>
<pre class="code"> css: 'opacity: .75; box-shadow: inset 0 0 8px #fff;',
</pre>
<p>CSS语句可以分行写，用反引号包裹CSS语句：</p>
<pre class="code"> css: `
opacity: .75;
box-shadow: inset 0 0 8px #fff;
`,
</pre>
<p>最后再次强调：给参数赋值时，对象值要使用花括号 {} 将键值对群包裹起来，值为字符串要用小角引号 '' 或 "" 包裹起来，值为数值不要用引号、不要使用单位。</p>
<p>三、粒子交互</p>
<p>其实就是粒子的运动与暂停，它依赖于 CSS 变量 --state，该变量的 paused 和 running 值将使得例子暂停、运动。</p>
<p>四、应用实例</p>
<p>
① <a href="http://mhh.52qingyin.cn/art/bshow.php?st=3&sd=3&art=mahei_1694185891" target="_blank">赵越 - 纳裕</a><br>
② <a href="http://mhh.52qingyin.cn/art/bshow.php?st=3&sd=3&art=mahei_1694357518" target="_blank">Strobe</a><br>
③ <a href="http://mhh.52qingyin.cn/art/bshow.php?st=3&sd=3&art=mahei_1694733990" target="_blank">殊途同归</a><br>
④ <a href="http://mhh.52qingyin.cn/art/bshow.php?st=3&sd=3&art=1694613043" target="_blank">旋涡</a>
</p>
</div> 黑黑辛苦了，把这个H5粒子插件的各种使用描述得这么细致、齐全{:4_199:} 红影 发表于 2023-9-15 18:38
黑黑辛苦了，把这个H5粒子插件的各种使用描述得这么细致、齐全
过得去 马黑黑 发表于 2023-9-15 19:36
过得去
非常好呢{:4_187:} 红影 发表于 2023-9-15 20:43
非常好呢
还不差 马黑黑 发表于 2023-9-15 21:09
还不差
同一个插件，能变化出这么多效果呢{:4_187:} 红影 发表于 2023-9-15 21:52
同一个插件，能变化出这么多效果呢
插件就是要提供一些功能，然后也能提供一些基于渲染的差异形态 马黑黑 发表于 2023-9-15 22:11
插件就是要提供一些功能，然后也能提供一些基于渲染的差异形态
这个考虑得很周到细致呢{:4_204:} 红影 发表于 2023-9-15 22:39
这个考虑得很周到细致呢
这是插件的开发方向 马黑黑 发表于 2023-9-15 23:06
这是插件的开发方向
黑黑的方向把握得很正确{:4_204:} 红影 发表于 2023-9-15 23:25
黑黑的方向把握得很正确
不一定，这是按个人理解和能力去做的 马黑黑 发表于 2023-9-15 23:25
不一定，这是按个人理解和能力去做的
这个帖子都忘记亮起来，这个也是汇总呢。 红影 发表于 2023-9-16 08:43
这个帖子都忘记亮起来，这个也是汇总呢。
亮不亮随意的 马黑黑 发表于 2023-9-16 09:07
亮不亮随意的
便于查找啊。 红影 发表于 2023-9-16 09:12
便于查找啊。
没电了亮也找不到 马黑黑 发表于 2023-9-16 12:43
没电了亮也找不到
这话说的，还不如说没饭吃了，啥都不去玩了呢{:4_173:} 红影 发表于 2023-9-16 13:36
这话说的，还不如说没饭吃了，啥都不去玩了呢
说得对 4个实例就做过一个，下面三个没有做的{:4_203:} 小辣椒 发表于 2023-9-23 12:35
4个实例就做过一个，下面三个没有做的
慢慢来不急的
页:
[1]