jQuery粒子系统插件Particleground

所属分类:UI-背景

 96942  590  查看评论 (17)
分享到微信朋友圈
X
jQuery粒子系统插件Particleground ie兼容10

使用方法

页面调用jquery和particleground.js

<script type='text/javascript' src='js/jquery-1.11.1.min.js'></script>
<script type='text/javascript' src='jquery.particleground.min.js'></script>

html

<div id="particles">
  <div class="intro">
    <h1>Particleground</h1>
    <p>A jQuery plugin for snazzy background particle systems</p>
  </div>
</div>


js初始化插件,调用对应的id

$('#particles').particleground();


选项

可以通过设置选项选择对象的构造函数。

下面是一个示例的设置粒子系统点和线的颜色:

$('#your-element').particleground({
    dotColor: '#ff0000',
    lineColor: '#ff0000'
});


下面是一个完整的列表的选项,默认值:

minSpeedX


0.1

maxSpeedX


0.7

minSpeedY


0.1

maxSpeedY


0.7

directionX


'center'


可以“center”,“left”或'right”。“中心”意味着点将反弹的边缘画布。


directionY


'center'

可以 'center', 'up' or 'down'. 'center' 意味着点将反弹的边缘画布。

相关插件-背景

jQuery颜色选择器ColorPicker

ColorPicker基于强大的jQuery,使用方便、配置简单,同时不需要加载额外的CSS文件。可以随心所欲的使用到项目中,兼容各大浏览器。
  背景
 43127  180

基于canvas的星空效果

基于canvas的星空粒子效果(代码注释全!)
  背景
 50965  229

jquery形象照片卷轴插件

jquery形象照片卷轴插件
  背景
 28093  204

全屏背景滚动

基于HTML5的炫酷个人网站模板
  背景
 56995  791

讨论这个项目(17)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    L天峰 0
    2018/6/5 17:54:45
    怎么加载不进jq里面的,说不存在该方法
    回复
    噢BOnanana 0
    2018/4/13 21:37:06
    各位大神,想请教一下我想在ant design pro中用这个该怎么搞
    回复
    欣欣呀 0
    2017/7/11 17:28:49

    棒棒的,不错,谢谢

    回复
    八毛钱 0
    2017/1/5 16:01:47

    背景颜色像换成蓝色的,在哪改?只看到点线的颜色

        金狐狸0
        2017/4/28 13:56:15

        插件js 里改貌似

    回复
    晴天 ? 0
    2016/5/7 13:05:22
    good
        我就笑笑不说话0
        2016/12/3 22:12:57
        为什么每次刷新背景就没有,改变页面大小背景才出来?
    回复
    377352472 0
    2016/4/21 15:04:30
    凝望...双眸 0
    2016/4/20 16:04:39
    坐满屏网站,用这个背景,弄了好久
        Runaway Baby OvO0
        2017/2/20 11:34:45

        666

    回复
    wushaodong 0
    2015/11/28 17:11:14
    逸想灬天檫 0
    2015/11/16 17:11:13
    Dream 0
    2015/9/22 14:09:43
取消回复