1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > html5 云朵飘动效果 jQuery超有趣的白云飘动特效插件

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

时间:2020-12-04 06:58:19

相关推荐

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

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

安装

可以使用bower安装这个白云飘动特效插件:

bower install jqlouds --save

使用方法

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

这个白云飘动特效的HTML结构非常简单,使用一个空的

元素即可。

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

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

设置天空的高度

最小的天空高度是最大尺寸云朵的高度,你可以通过CSS或js来设置一个天空高度:

通过CSS:

jQuery(function($) {

$(#sky).jQlouds();

});

通过JS:

jQuery(function($) {

$(#sky).jQlouds({ skyHeight: 223 });

});

白云飘动动画

如果需要制作白云被风吹动的效果,可以按下面的设置:

$(#sky).jQlouds({

wind: true

});

这个插件唯一的缺点是没有提供设置云朵

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。