dot-lz.js使用说明

评论资讯 [ 总 424 则 ]

·了了 - 2024-12-18 21:32
·悄然 - 2024-12-17 15:19
·悄然 - 2024-12-15 15:12
·悄然 - 2024-12-9 12:32
·飞飞 - 2024-12-9 12:31
·小希 - 2024-12-7 11:50
·飞飞 - 2024-12-5 15:53
·飞飞 - 2024-12-3 16:42
·悄然 - 2024-12-3 16:41
·飞飞 - 2024-12-1 18:27

友情链接

◇ 午后时光
◇ 花潮论坛
◇ 马黑永硕网盘
◇ 老站
◇ 随意云
◇ css-doodle中文版
◇ HTML官方文档
◇ Web代码格式化工具
◇ 清音陋屋
◇ cubic-bezier

网站统计

·前端三套件 : 105
·JS插件 : 46
·黑石音画 : 318
·代码集锦 : 50
·小工具集合 : 23
·网友作品精选 : 6
·svgdr : 26

·今日访问 : 34
·页面点击 : 35
·当前在线 : 13

dot-lz.js使用说明

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

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 发布: 看到粒子颜色可以改变，刚换了一种青色的试了一下，也好看。。可以配不同色调的贴子了。。。。还可以使用随机颜色。。这个设定太体贴了。。

资源引用与粒子配置

相关说明

实例