jQuery超有趣的白云飘动特效插件

当前位置:主页 > jQuery库 > 图片效果 > jQuery超有趣的白云飘动特效插件
jQuery超有趣的白云飘动特效插件
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2015-04-03
    阅读:
简要教程

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之间。你可以通过minCloudsmaxClouds参数来修改它:

$('#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);