图片/图形
jQlouds 超有趣白云飘动jQuery特效
PetitQ
jQlouds 是一款非常有趣的可以制作天空中白云飘动特效的 jQuery 插件。天空中白云朵朵，你可以通过这个插件来设置云朵的大小、位置、模糊以及被风吹动的效果。
使用方法
使用 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);
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
