马黑黑 发表于 2025-10-23 08:02

lzRing()指令演示

<style>
        .artBox { font-size: 18px; margin: 20px auto; max-width: 1200px; }
        .artBox > p { margin: 10px 0; line-height: 30px; }
        .artBox mark { padding: 4px 6px; background: lightblue; }
</style>

<div class="artBox">
        <p><mark>lzRing()</mark> 指令的名称暗示着它的含义：lz，粒子，Ring，圆环，合起来意为粒子绕成一个圆环。指令需要三个参数：</p>
        <pre>
        ① num，粒子数量
        ② pa，粒子的父元素
        ③ { option }，粒子的具体配置</pre>
        <p>下面是 lzRing() 指令语法结构，其中的粒子配置罗列的键值对是指令能够识别的 ——</p>
        <div class="codebox" data-title="lzRing指令语法">
tz.lzRing(num, pa, {
        width: 40, <txt-green>// 粒子宽度（缺省20）</txt-green>
        height: 40, <txt-green>// 粒子高度（缺省20）</txt-green>
        background: 'pink', <txt-green>// 粒子背景色（缺省随机）</txt-green>
        tag: tag, <txt-green>// 粒子所使用的标签名（缺省div）</txt-green><br>
        className: 'circle' <txt-green>// 粒子的class属性名，指向 .class CSS选择器，缺省形状为矩形</txt-green><br>
});
        </div>
        <p>给个可以在线预览的实例：先创建一个装载粒子的容器，其id="mum"（临时定义），class="wrap300"（使用配套CSS文档的提供的class选择器）；粒子的配置只有宽高与类名，后者使用的是CSS文档自带的 <txt-red>.circle</txt-red> 选择器，其余不配置的使用模块默认值。</p>
        <div class="codebox" data-prev="1">
&lt;style&gt;
        @import 'https://638183.freep.cn/638183/web/tz/tz.e.css';
        .pa { --bg: linear-gradient(plum, black, tan); }
&lt;/style&gt;

&lt;div class="pa"&gt;&lt;/div&gt;

&lt;script type="module"&gt;
        import TZ from 'https://638183.freep.cn/638183/web/tz/tz.e.js';
        const tz = TZ.TZ('pa');
       
        tz.add('div', 'mum', 'wrap300', {style: 'border: 1px solid gray'});
        tz.lzRing(15, 'mum', {
                width: 40,
                height: 40,
                className: 'circle'
        });
&lt;/script&gt;
        </div>
        <p>粒子的更多修饰可通过CSS代码的同名选择器 <mark>.circle {...}</mark> 进一步扩充，指令不提供其它配置参数外的配置入口。</p>
</div>

<script type="module">
        import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js';
        linenumber();
</script>

红影 发表于 2025-10-23 18:56

“粒子的更多修饰可通过CSS代码的同名选择器 .circle {...} 进一步扩充”
原本的选择器里只有border-radius: 50%;这一句{:4_173:}

红影 发表于 2025-10-23 19:04

就这么几句，就能得到圆环粒子了，真方便啊{:4_199:}

马黑黑 发表于 2025-10-23 21:55

红影 发表于 2025-10-23 19:04
就这么几句，就能得到圆环粒子了，真方便啊

还好。指令设置的自由度差一点

马黑黑 发表于 2025-10-23 21:56

红影 发表于 2025-10-23 18:56
“粒子的更多修饰可通过CSS代码的同名选择器 .circle {...} 进一步扩充”
原本的选择器里只有border-radiu ...

对，就是个形状

红影 发表于 2025-10-23 23:07

马黑黑 发表于 2025-10-23 21:55
还好。指令设置的自由度差一点

已经表明是圆环的粒子，还要啥自由度啊{:4_173:}

红影 发表于 2025-10-23 23:07

马黑黑 发表于 2025-10-23 21:56
对，就是个形状

可加的东西还能加。

马黑黑 发表于 2025-10-24 12:33

红影 发表于 2025-10-23 23:07
可加的东西还能加。

这个自然

马黑黑 发表于 2025-10-24 12:34

红影 发表于 2025-10-23 23:07
已经表明是圆环的粒子，还要啥自由度啊

我说的是粒子的可设置性。现在需要在CSS中完成。

红影 发表于 2025-10-24 23:13

马黑黑 发表于 2025-10-24 12:33
这个自然

这样很方便呢{:4_187:}

红影 发表于 2025-10-24 23:13

马黑黑 发表于 2025-10-24 12:34
我说的是粒子的可设置性。现在需要在CSS中完成。

还好，需要设置的东西不多的。

马黑黑 发表于 2025-10-25 18:37

红影 发表于 2025-10-24 23:13
还好，需要设置的东西不多的。

还是需要一些设置的。我正打算在下一个版本修改一些机制，指令暂不增加，原有指令方法基本不变，就是做一些扩充，主要针对粒子类的三个指令，让它们能够在配置里加入其它的内联样式，不那么死板。下个版本同时增强一些原有功能，比如 class列表的处理，e版本在 add() 指令中的第三个参数现在只支持单个class，它应该支持多个class（当然 add() 指令可以通过配置添加多个 class 属性）。

马黑黑 发表于 2025-10-25 18:37

红影 发表于 2025-10-24 23:13
这样很方便呢

还好

红影 发表于 2025-10-25 20:21

马黑黑 发表于 2025-10-25 18:37
还是需要一些设置的。我正打算在下一个版本修改一些机制，指令暂不增加，原有指令方法基本不变，就是做一 ...

黑黑又开始新的策划了呢{:4_187:}

红影 发表于 2025-10-25 20:21

马黑黑 发表于 2025-10-25 18:37
还好

是非常好呢{:4_187:}

马黑黑 发表于 2025-10-25 21:38

红影 发表于 2025-10-25 20:21
是非常好呢

还非常好

马黑黑 发表于 2025-10-25 21:38

红影 发表于 2025-10-25 20:21
黑黑又开始新的策划了呢

基本上是修正吧

红影 发表于 2025-10-25 21:57

马黑黑 发表于 2025-10-25 21:38
还非常好

在我这里感觉非常好呢{:4_187:}

红影 发表于 2025-10-25 21:57

马黑黑 发表于 2025-10-25 21:38
基本上是修正吧

也有开拓的新内容啊{:4_204:}

马黑黑 发表于 2025-10-25 22:41

红影 发表于 2025-10-25 21:57
也有开拓的新内容啊

扩展性质的细节调整
页: [1] 2
查看完整版本: lzRing()指令演示