jQuery粒子系统插件Particleground

所属分类:UI-背景

 126377  794  查看评论 (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全屏背景插件Vegas2

网页全屏背景jQuery插件 Vegas2,它和其它背景插件不同之处就是带有幻灯片功能。幻灯片的切换有多种风格,如旋转、渐隐、左右等方式,切换的时候还有进度条显示。
  背景
 42178  494

jquery固定标题控制插件Midnight.js

midnight.js是在页面滚动时控制多标题设计的开关jQuery插件,所以对应下面的内容你总能看到一个标题。
  背景
 42518  533

jquery形象照片卷轴插件

jquery形象照片卷轴插件
  背景
 40107  363

基于canvas的星空效果

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

讨论这个项目(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
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复