dot-lz.js使用说明

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

dot-li.js 没有 ball-lz.js 的碰撞机制，其特色是粒子能响应鼠标指针移动（移动设备是点击）而产生变化，粒子在离鼠标指针150px之内的距离时会慢慢变大到指定尺寸，变大后如果距离超出了范围又会慢慢变回原来的尺寸。粒子可以响应帖子内外鼠标指针的移动，同时鼠标指针不会受到帖子内外其他顶层元素的影响。dot-js脚本还加入了resize机制，改变浏览器窗口大小后还可以较好响应鼠标指针的移动交互。

资源引用与粒子配置

var sc = document.createElement('script');

sc.charset = 'utf-8';

sc.src = 'https://638183.freep.cn/638183/web/js/dot-lz.js';

document.body.appendChild(sc);

var lz = {

papa: '#papa',/* 帖子父元素标识 */

total: 100, /* 粒子总数 */

r: 3, /* 粒子半径 */

max_r: 15, /* 粒子变大半径极限 */

step: 0.5, /* 粒子行进步幅 */

color: 'rgba(255,255,255,.7)', /* 粒子颜色缺省或空值表示使用随机颜色 */

opacity: .9, /* 粒子随机颜色透明度 */

move: false /* 粒子移动开关 */

};

//配置可以写在一行里

var lz = {papa: '#papa', total: 100, r: 3, max_r: 15, step: 0.5, color: 'rgba(255,255,255,.7)', opacity: .9, move: false};

实例

午后时光 → Blissful Mind

马黑整站系统 → Blissful Mind

花潮论坛 → Blissful Mind

前一篇: ball-lz.js使用说明
下一篇: rainyday插件试用心得

发表评论:

评论列表 [3条]

#3 | 知名不具于 2024-4-23 16:36 发布: 有趣的封装粒子，这个讲解真详细。

#2 | 小希于 2024-4-23 12:31 发布: 试了下全页粒子，粒子虽小了点，跟随鼠标变大的功能页内页外同样适用。。这配置太灵活了吧。。

#1 | 飞飞于 2024-4-23 12:26 发布: 看到粒子颜色可以改变，刚换了一种青色的试了一下，也好看。。可以配不同色调的贴子了。。。。还可以使用随机颜色。。这个设定太体贴了。。

资源引用与粒子配置

相关说明

实例