注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

时髦的jquery粒子背景插件Particleground

动画 fishcity 2601浏览

jquery粒视差Particleground

Particleground是一款时髦的jquery粒子系统背景插件,PC端可通过鼠标控制视差效果,而移动端可用重力感应控制,Particleground可以运行在任何支持html5 canvas的浏览器上。

jquery实例:Particleground的使用方法

引入核心文件

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

写入JS初始化

$('#your-element').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' 和 'down'.
density 10000 确定生成多少料子
dotColor '#666666'  点的颜色
lineColor '#666666'  线的颜色
particleRadius 7  粒子半径
Dot size    点的大小
lineWidth 1  线的宽度
curvedLines false 线是否弯曲
proximity 100 两个点间多远开始连
parallax true  视差效果
parallaxMultiplier 5 数量越低,视差效果更强
onInit function() {} 初始时调用函数
onDestroy function() {} 销毁时调用函数

方法

pause:暂停

$('#your-element').particlegound('pause');

start:开始

$('#your-element').particlegound('start');

destroy:销毁,把插件移除

$('#your-element').particlegound('destroy');

转载请注明:jQ酷 » 时髦的jquery粒子背景插件Particleground

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。