请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
x
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选择器,缺省形状为矩形
});
给个可以在线预览的实例:先创建一个装载粒子的容器,其id="mum"(临时定义),class="wrap300"(使用配套CSS文档的提供的class选择器);粒子的配置只有宽高与类名,后者使用的是CSS文档自带的 .circle 选择器,其余不配置的使用模块默认值。
<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 {...} 进一步扩充,指令不提供其它配置参数外的配置入口。
|