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);
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!