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上产生粒子动画效果。
配置参数
参数 | 默认值 | 类型 |
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);
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!