注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

一款很棒且简单的jquery创建云插件jQlouds

UI fishcity 1056浏览

jquery创建云插件jQlouds

jQlouds是一个很棒的且简单的jquery插件,jQlouds可以轻松的让网站加上会飘动的云,让网站更多的动感觉效果。jQlouds插件有灵活的参数设置,只需更改下就可以实现多种不同的效果。

jquery实例:jQlouds的使用方法:

引入核心文件

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

基础的使用法非常简单,只需传入一个元素的选择器然后调用初始化插件即可。

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

您可以在同一页面上生成多个云,注意元素需相对位置,以满足绝对定位的云,代码如下

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

天空的高度,可以通过两种方式来定义

1、通过CSS来定义高度

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

2、通过JS参数来设置高度

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

动画,有时风一吹云就在天空中飘动,那么如何让云动起来呢?很简单,只需要把参数wind的值设置为true就可以了

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

云的数量,可以通过minClouds和maxClouds来设定云的随机数量

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

jQlouds默认提供的图片大小是227×96像素,所有的云大小都是在此基础上随机生成的,如你想按制大小可通过参数来设置

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

自定义云,如果你不喜欢jQlouds自带的云,你可以通过修改src属性值自定义您的云

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

参数选项

options = {
src: 'images/cloud.png', // 云图片的路径
maxWidth: 227, // 云的最大宽度
maxHeight: 96, // 云的最大高长
minClouds: 20, // 最小云数量
maxClouds: 30, // 最大云数量
skyHeight: null, // 天空的高度
wind: false // 是否飘动(默认不飘动)
};

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

转载请注明:jQ酷 » 一款很棒且简单的jquery创建云插件jQlouds

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。