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

当前位置:主页 > jQuery库 > 布局和界面 > 可为HTML元素添加精美粒子动画效果的jQuery插件
可为HTML元素添加精美粒子动画效果的jQuery插件
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2015-07-21
    阅读:
简要教程

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);