php粒子背景特效_粒子背景特效Particleground.js插件使用解析_蓝戒的博客

Particleground简介：

Particleground是一个JavaScript插件，用于时髦的后台粒子系统。包括鼠标在桌面设备和移动设备上的陀螺仪控制的可选视差效果。在支持HTML5画布的浏览器中工作。

初始化：

particleground(document.getElementById('your-element');

注意事项：

v1.0.0以上版本支持js原生调用，不必依赖jquery。

具体使用方法：

1)引入文件

2)html

3)js调用

// 原生js(要求v1.0.0以上版本):

particleground(document.getElementById('particles');

//可以根据下面表格中参数说明设定相应参数

particleground(document.getElementById('particles'), {

dotColor: '#ff0000',

lineColor: '#ff0000'

});

// jQuery：

$('#particles').particleground();

//可以根据下面表格中参数说明设定相应参数

$('#particles').particleground({

dotColor: '#ff0000',

lineColor: '#ff0000'

});

参数：

名称

默认值

描述

minSpeedX

0.1

maxSpeedX

0.7

minSpeedY

0.1

maxSpeedY

0.7

directionX

‘center’

可用值 ‘center’, ‘left’ 和’right’.

directionY

‘center’

可用值’center’, ‘up’ 和 ‘down’.

density

10000

确定生成多少料子

dotColor

‘#666666’

点的颜色

lineColor

‘#666666’

线的颜色

particleRadius

7

粒子半径

Dot size

点的大小

lineWidth

1

线的宽度

curvedLines

false

线是否弯曲

proximity

100

两个点间多远开始连

parallax

true

视差效果

parallaxMultiplier

5

数量越低,视差效果更强

onInit

function() {}

初始时调用函数

onDestroy

function() {}

销毁时调用函数

项目地址：

https://github.com/jnicol/particleground

参考：

http://www.jq22.com/jquery-info566

http://www.jqhtml.com/8478.html