请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
x
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};
相关说明
所有配置均可缺省,这表示将使用dot-lz的默认配置,它将是全页粒子功能。一般不建议这么做,应根据需要选择性地配置相关参数。另外,如果粒子容器元素使用class,papa 变量值应带一个前缀.,例如:papa: '.mybox',如此,脚本才能正确识别。
粒子采用后追加方式引入,因此具备较高的自然元素层级,可能会阻挡其他页面元素的交互操作。若此,可以给相应元素提升 z-index 属性值来规避此种现象。当然还有其他的解决方案,这里就不深入探讨了。
实例
午后时光 → Blissful Mind
马黑整站系统 → Blissful Mind
花潮论坛 → Blissful Mind
|