lzRing()指令演示
lzRing() 指令的名称暗示着它的含义：lz，粒子，Ring，圆环，合起来意为粒子绕成一个圆环。指令需要三个参数：
① num，粒子数量
② pa，粒子的父元素
③ { option }，粒子的具体配置
下面是 lzRing() 指令语法结构，其中的粒子配置罗列的键值对是指令能够识别的 ——
tz.lzRing(num, pa, {
width: 40, // 粒子宽度（缺省20）
height: 40, // 粒子高度（缺省20）
background: 'pink', // 粒子背景色（缺省随机）
tag: tag, // 粒子所使用的标签名（缺省div）
className: 'circle'// 粒子的class属性名，指向 .class CSS选择器，缺省形状为矩形
});
className: 'circle'
});
给个可以在线预览的实例：先创建一个装载粒子的容器，其id="mum"（临时定义），class="wrap300"（使用配套CSS文档的提供的class选择器）；粒子的配置只有宽高与类名，后者使用的是CSS文档自带的
<style>
@import 'https://638183.freep.cn/638183/web/tz/tz.e.css';
.pa { --bg: linear-gradient(plum, black, tan); }
</style>
<div class="pa"></div>
<script type="module">
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'
});
</script>
粒子的更多修饰可通过CSS代码的同名选择器 .circle {...} 进一步扩充，指令不提供其它配置参数外的配置入口。
前一篇: tzMaker初级教程
下一篇: tzMaker发布文本帖子演示
发表评论:
评论列表 [0条]
