可为HTML元素添加精美粒子动画效果的jQuery插件

ClickSpark是一款可以为HTML元素添加精美的粒子动画效果的jQuery插件。该插件可以通过元素的点击事件来触发粒子动画效果。你可以设置粒子的数量，速度和大小等属性，效果非常的不错。

使用方法

安装

可以通过bower来安装该粒子插件。

bower install clickspark                
              

HTML结构

该粒子效果的触发元素可以是任何的HTML元素，如一个按钮：

<button class="btn btn-default button-2">Click Me!</button>           
              

初始化插件

使用默认的插件调用方法clickSpark()会为元素绑定一个点击事件，在点击该元素后会产生粒子效果。例如：

$('h1').clickSpark();  
              

上面的代码会在所有的h1元素被点击之后产生粒子动画效果。

你也可以在初始化时传入一些参数来配置粒子动画效果。

$('h1').clickSpark({     
    particleImagePath: '../particle.png',     
    particleCount: 35,     
    particleSpeed: 12,     
    particleSize: 12,
    particleRotationSpeed: 20,    
});             
              

你还可以在点击一个元素之后，在另一个元素上触发粒子动画效果。

$(document).ready(function () {
    $('button').click(function () {
        clickSpark.fireParticles($('.sparklingDiv'));
    });
});             
              

上面的代码在点击.button按钮之后，会在.sparklingDiv这个div上产生粒子动画效果。

配置参数

全局粒子配置参数

你可以使用下面的方法来设置粒子动画效果的属性。

clickSpark.setParticleCount(50);
clickSpark.setParticleSize(12);
clickSpark.setParticleSpeed(12);
clickSpark.setParticleImagePath('../particle.png');
clickSpark.setParticleRotationSpeed(20);