码迷,mamicode.com
首页 > 其他好文 > 详细

Html5添加超有趣的白云飘动特效插件教程

时间:2016-01-06 12:30:40      阅读:177      评论:0      收藏:0      [点我收藏+]

标签:

一、安装
bower install jqlouds --save

二、使用方法
<script src="jquery.js"></script>
<script src="dist/jquery.jqlouds.min.js"></script>
<div id="sky"></div>
$(’#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>

四、白云飘动动画
$(’#sky’).jQlouds({
wind: true
});

五、云朵的数量
$(’#sky’).jQlouds({
minClouds: 5,
maxClouds: 10
});

六、最大云朵的尺寸
$(’#sky’).jQlouds({
maxWidth: 113,
maxHeight: 48,
});

七、自定义云朵
$(’#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);  

KeyMob移动端广告平台是最专业最具有效果的移动广告平台,致力于为广告主提供精准高效的品牌与应用推广服务,同时为应用开发者提供稳定的SDK以及高收入的收益。

Html5添加超有趣的白云飘动特效插件教程

标签:

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
key
加入时间:2016-01-05
  关注此人  发短消息
文章分类
key”关注的人------(0
key”的粉丝们------(0
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!