当前位置：首页 > 网页特效 > 动画效果

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

分类：动画效果日期：2024-05-14 点击(0) 评论(0)

简介

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

```html
<button class="btn btn-default button-2">Click Me!</button>     
```      
#####  初始化插件
使用默认的插件调用方法clickSpark()会为元素绑定一个点击事件，在点击该元素后会产生粒子效果。例如：

```html
$('h1').clickSpark();  
```
上面的代码会在所有的h1元素被点击之后产生粒子动画效果。

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

```html
$('h1').clickSpark({     
    particleImagePath: '../particle.png',     
    particleCount: 35,     
    particleSpeed: 12,     
    particleSize: 12,
    particleRotationSpeed: 20,    
});     
```        
你还可以在点击一个元素之后，在另一个元素上触发粒子动画效果。
```html

$(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| 
#####  全局粒子配置参数
你可以使用下面的方法来设置粒子动画效果的属性。

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

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果