JS库之库之Particles.js中文开发手册及参数详解 中文开发手册及参数详解 因为自己需要做产品，所以一个好的UI界面也是很重要的，发现这种散射的原子颗粒特效还不错。今天脚本之 家小编把Particles.js中文开发手册及particles.js参数分享给大家，需要的朋友参考下吧 因为自己需要做产品，所以一个好的UI界面也是很重要的，发现这种散射的原子颗粒特效还不错，就弄了一个 官方github：https://github.com/VincentGarreau/particles.js/ demo制作器，注意可能需要FQ https://codepen.io/VincentGarreau/pen/pnlso 这个可以把你制作的demo导出 http://vincentgarreau.com/particles.js/这个可以用来尝试配置不同效果 使用方法 使用方法 加载particle.js并配置粒子： index.html app.js /* particlesJS.load(@dom-id, @path-json, @callback (optional)); */ particlesJS.load('particles-js', 'assets/particles.json', function() { console.log('callback - particles.js config loaded'); }); particles.json就是主要的配置文件 注意一下文件顺序，不然会出现问题 实际demo 这个玩意需要放在下面 如有需要下载demo请到QQ群，黑色原子效果很科幻，还不错 根据css颜色和json配置文件，就打造属于自己的科幻效果 参数参数 键值键值 particles.number.value particles.number.density.enable particles.number.density.value_area particles.color.value 参数选项/ 说明说明 参数选项 实例实例 number 数量 boolean number 区域散布密度大小 HEX (string) RGB (object) HSL (object) array selection (HEX) random (string) 原子的颜色 40 true / false 800 "#b61924" {r:182, g:25, b:36} {h:356, s:76, l:41} ["#b61924", "#333333", "999999"] "random" 

键值键值 参数选项/ 说明说明 参数选项 实例实例 particles.shape.type string array selection 原子的形状 particles.shape.stroke.width particles.shape.stroke.color particles.shape.polygon.nb_slides particles.shape.image.src particles.shape.image.width particles.shape.image.height particles.opacity.value particles.opacity.random particles.opacity.anim.enable particles.opacity.anim.speed particles.opacity.anim.opacity_min particles.opacity.anim.sync particles.size.value particles.size.random particles.size.anim.enable particles.size.anim.speed particles.size.anim.size_min particles.size.anim.sync particles.line_linked.enable particles.line_linked.distance particles.line_linked.color particles.line_linked.opacity particles.line_linked.width particles.move.enable particles.move.speed number 原理的宽度 HEX (string) 原子颜色 number 原子的多边形边数 path link svg / png / gif / jpg 原子的图片可以使用自定义图片 number (for aspect ratio) 图片宽度 number (for aspect ratio) 图片高度 number (0 to 1) 不透明度 boolean 随机不透明度 boolean 渐变动画 number 渐变动画速度 number (0 to 1) 渐变动画不透明度 boolean number 原子大小 boolean 原子大小随机 boolean 原子渐变 number 原子渐变速度 number boolean boolean 连接线 number 连接线距离 HEX (string) 连接线颜色 number (0 to 1) 连接线不透明度 number 连接线的宽度 boolean 原子移动 number 原子移动速度 particles.move.direction string 原子移动方向 particles.move.random particles.move.straight particles.move.out_mode particles.move.bounce particles.move.attract.enable particles.move.attract.rotateX particles.move.attract.rotateY interactivity.detect_on interactivity.events.onhover.enable interactivity.events.onhover.mode boolean 移动随机方向 boolean 直接移动 string (out of canvas) 是否移动出画布 boolean (between particles) 是否跳动移动 boolean 原子之间吸引 number 原子之间吸引X水平距离 number y垂直距离 string 原子之间互动检测 boolean 悬停 string array selection 悬停模式 interactivity.events.onclick.enable boolean 点击效果 "circle" "edge" "triangle" "polygon" "star" "image" ["circle", "triangle", "image"] 2 "#222222" 5 "assets/img/yop.svg" "http://mywebsite.com/assets/img/yop.png" 100 100 0.75 true / false true / false 3 0.25 true / false 20 true / false true / false 3 0.25 true / false true / false 150 #ffffff 0.5 1.5 true / false 4 "none" "top" "top-right" "right" "bottom-right" "bottom" "bottom-left" "left" "top-left" true / false true / false "out" "bounce" true / false true / false 3000 1500 "canvas", "window" true / false "grab" 抓取临近的 "bubble" 泡沫球效果 "repulse" 击退效果 ["grab", "bubble"] true / false 

键值键值 参数选项/ 说明说明 参数选项 实例实例 string array selection 点击效果模式 interactivity.events.onclick.mode "push" "remove" "bubble" "repulse" ["push", "repulse"] true / false interactivity.events.resize interactivity.events.modes.grab.distance 100 interactivity.events.modes.grab.line_linked.opacity number (0 to 1) 原子互动抓取距离连线不透明度 0.75 100 interactivity.events.modes.bubble.distance interactivity.events.modes.bubble.size 40 boolean 互动事件调整 number 原子互动抓取距离 interactivity.events.modes.bubble.duration interactivity.events.modes.repulse.distance interactivity.events.modes.repulse.duration interactivity.events.modes.push.particles_nb interactivity.events.modes.push.particles_nb retina_detect 总结总结 number 原子抓取泡沫效果之间的距离 number 原子抓取泡沫效果之间的大小 number 原子抓取泡沫效果之间的持续事件 (second) number 击退效果距离 number 击退效果持续事件 (second) number 粒子推出的数量 number boolean 0.4 200 1.2 4 4 true / false 以上所述是小编给大家介绍的JS库之Particles.js中文开发手册及参数详解，希望对大家有所帮助，如果大家有任何疑问请给我 留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！