html怎么为标签添加动画效果,可为HTML元素添加精美粒子动画效果的jQuery插件

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

使用方法

安装

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

bower install clickspark

HTML结构

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

Click Me!

初始化插件

使用默认的插件调用方法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上产生粒子动画效果。

配置参数

参数

默认值

类型

particleImagePath

string

particleCount

35

int

particleSpeed

12

int

particleSize

12

int

particleRotationSpeed

0

int

全局粒子配置参数

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

clickSpark.setParticleCount(50);

clickSpark.setParticleSize(12);

clickSpark.setParticleSpeed(12);

clickSpark.setParticleImagePath('../particle.png');

clickSpark.setParticleRotationSpeed(20);