jquery创建飘动的云插件jQlouds

所属分类:其他-动画效果

 600447  442  查看评论 (11)
分享到微信朋友圈
X
jquery创建飘动的云插件jQlouds ie兼容6

基本用法

添加jquery库和jqlouds.js你网页head位置

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.jqlouds.min.js"></script>


在你的网页添加所要放置云的容器标签:

<div id="sky" style="height:223px;"></div>


你只需要通过jQuery选择器调用插件来完成工作。

你可以在同一页有多个云,每个元素都将充满随机静态云。请注意,选定的元素会相对定位为了适应绝对定位的云。

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


天空高度

不像真正的天空,在这里,我们知道它的确切高度:最低高度是基于最大的云的高度自动给出。你可以给一个不同高度的元素通过插件本身。


通过CSS

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


或通过 jquery

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


动画

有时风一吹,云就在天空移动,不是吗?嗯,你可以打开设置:

$('#sky').jQlouds({
  wind: true
});
相关插件-动画效果

基于three.js雪花效果

基于three.js开发的雪花飘落效果,跟随鼠标
  动画效果
 28318  271

2018年华为官网双十一红包雨特效

2018年华为官网双十一红包雨特效,从一堆压缩的代码中整理出来比较费力,看JQ22上红包雨特效活动特效较少,发布给大家下载。
  动画效果
 31955  344

jQuery+HTML5相应式文字粒子动画

jQuery+HTML5相应式文字粒子动画,使用canvas的。请在服务器环境下运行。
  动画效果
 48738  667

html5 canvas粒子星空

html5 canvas鼠标跟随粒子星空动画
  动画效果
 74853  736

讨论这个项目(11)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    大佬 0
    2019/4/29 17:25:46
    谁能告诉我,这个图片怎么换? 回复
    ┽陌路,归客ぅ 0
    2016/10/9 12:10:30
    。? 0
    2016/9/22 17:09:49
    很喜欢 感觉不错 回复
    红发 0
    2016/9/19 14:09:08
    简~单~ 0
    2016/7/13 9:07:18
    这云飘的我尴尬症都犯了 回复
    風啟❦落時 0
    2016/6/24 11:06:25
    不是很平滑的感觉。
        。?0
        2016/9/22 17:09:43
        LDL5209090
        2017/5/16 11:11:42

        有办法改掉不平滑的感觉吗?

    回复
    时光荏苒 0
    2016/6/12 15:06:37
    Legend 0
    2014/12/9 10:52:21
    效果不太好 一抖一抖的
        H0
        2016/4/21 16:04:21
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复