当前位置：首页 > 网页特效 > 动画效果

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

分类：动画效果日期：2024-05-14 点击(2) 评论(0)

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

简介

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

```html
<script src="jquery.js"></script>
<script src="dist/jquery.jqlouds.min.js"></script>   
```             
这个白云飘动特效的HTML结构非常简单，使用一个空的div元素即可。

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

```html
$('#sky1, #sky2').jQlouds();   
```            
#####  设置天空的高度
最小的天空高度是最大尺寸云朵的高度，你可以通过CSS或js来设置一个天空高度：

通过CSS:

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

```html
<div id="sky"></div>
<script>
jQuery(function($) {
  $('#sky').jQlouds({ skyHeight: 223 });
});
</script>   
```             
#####  白云飘动动画 白云飘动动画
如果需要制作白云被风吹动的效果，可以按下面的设置：

```html
$('#sky').jQlouds({
  wind: true
});
```                
这个插件唯一的缺点是没有提供设置云朵飘动速度的参数。但是如果你想修改速度，可以自己修改源文件中的$.jQlouds.jQloudsAnimate函数中的.animate方法。

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

```html
$('#sky').jQlouds({
  minClouds: 5,
  maxClouds: 10
}); 
```               
#####  最大云朵的尺寸
默认的图片尺寸是227x96 px（默认图片是作为base64图像写在插件中的）。所有的图片都是随机生成的，尺寸小于或等于这个尺寸。你可以通过下面的方法来调整这个尺寸区间：

```html
$('#sky').jQlouds({
  maxWidth: 113,
  maxHeight: 48,
});  
```              
#####  自定义云朵
如果想使用自己的云朵图片，只需要修改src属性即可：

```html
$('#sky').jQlouds({
  src: 'path/to/image.png',
});    
```            
#####  配置参数
下面是jQlouds支持的所有可用参数：

```html
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);     
```

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果