jQuery超有趣的白云飘动特效插件_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

jQlouds是一款非常有趣的可以制作天空中白云飘动特效的jQuery插件。天空中白云朵朵，你可以通过这个插件来设置云朵的大小、位置、模糊以及被风吹动的效果。

安装

可以使用bower安装这个白云飘动特效插件：

bower install jqlouds --save

使用方法

使用jQlouds插件时需要在页面中引入必要依赖的文件：

<script src="jquery.js"></script>
<script src="dist/jquery.jqlouds.min.js"></script>

这个白云飘动特效的HTML结构非常简单，使用一个空的<div>元素即可。

<div id="sky"></div>

你可以在同一个页面创建多个云朵容器，通过多个jQuery选择器来选择不同的元素，每个元素将被随机填充静态的云朵。注意，这些元素将被设置为相对定位，以容纳绝对定位的云朵。

$('#sky1, #sky2').jQlouds();

设置天空的高度

最小的天空高度是最大尺寸云朵的高度，你可以通过CSS或js来设置一个天空高度：

通过CSS:

<div id="sky" style="height:223px;"></div>
<script>
jQuery(function($) {
  $('#sky').jQlouds();
});
</script>

通过JS：

<div id="sky"></div>
<script>
jQuery(function($) {
  $('#sky').jQlouds({ skyHeight: 223 });
});
</script>

白云飘动动画

如果需要制作白云被风吹动的效果，可以按下面的设置：

$('#sky').jQlouds({
  wind: true
});

这个插件唯一的缺点是没有提供设置云朵飘动速度的参数。但是如果你想修改速度，可以自己修改源文件中的$.jQlouds.jQloudsAnimate函数中的.animate方法。

云朵的数量

统一天空下云朵的数量被随机的设置为20-30之间。你可以通过minClouds和maxClouds参数来修改它：

$('#sky').jQlouds({
  minClouds: 5,
  maxClouds: 10
});

最大云朵的尺寸

默认的图片尺寸是227x96 px（默认图片是作为base64图像写在插件中的）。所有的图片都是随机生成的，尺寸小于或等于这个尺寸。你可以通过下面的方法来调整这个尺寸区间：

$('#sky').jQlouds({
  maxWidth: 113,
  maxHeight: 48,
});

自定义云朵

如果想使用自己的云朵图片，只需要修改src属性即可：

$('#sky').jQlouds({
  src: 'path/to/image.png',
});

配置参数

下面是jQlouds支持的所有可用参数：

options = {
  src: 'images/cloud.png', // path to image, the default is a base64 (you can see the actual string in sources)
  maxWidth: 227, // max image's width
  maxHeight: 96, // amx image's height
  minClouds: 20, // minimum amount of clouds
  maxClouds: 30, // maximum amount of clouds
  skyHeight: null, // height of the container element
  wind: false // animate clouds, default is false
};

$('#sky').jQlouds(options);