时髦的jquery粒子背景插件Particleground

时髦的jquery粒子背景插件Particleground

 动画  fishcity  10个月前 (09-20)  1561浏览

Particleground是一款时髦的jquery粒子系统背景插件，PC端可通过鼠标控制视差效果，而移动端可用重力感应控制，Particleground可以运行在任何支持html5 canvas的浏览器上。

jquery实例：Particleground的使用方法

引入核心文件

1 2	<script type='text/javascript' src='js/jquery-1.11.1.min.js'></script>   <script type='text/javascript' src='../jquery.particleground.min.js'></script>

构建html，实例只需一个容器就可以实现。

1	<div id="particles"></div>

写入JS初始化

1 2 3 4 5 6 7

$('#your-element').particleground();   //带参数，下面代码设定点和线的颜色 $('#your-element').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() {}	销毁时调用函数

方法

pause：暂停

1	$('#your-element').particlegound('pause');

start：开始

1	$('#your-element').particlegound('start');

destroy：销毁，把插件移除

1	$('#your-element').particlegound('destroy');

 

转载请注明：jQ酷 » 时髦的jquery粒子背景插件Particleground

 

下载地址：本站下载 | 百度云 | 官方下载