jQuer插件满屏气泡飘落动画效果

Posted 2020-12-04 lprosper

飘落动画效果插件引用：

<script src="https://cdn.bootcss.com/JQuery-Snowfall/1.7.4/snowfall.jquery.min.js"></script>

注意：需要引用jQuery，要在插件之前引用安装。

 1         // 当窗口尺寸改变时重新执行函数，避免出现不好的用户体验
 2         // 因比较消耗cpu，本站没有采用这种方式
 3         function floated(){
 4             $(document).snowfall(‘clear‘);
 5             $(document).snowfall({
 6                 image: "imageURL",
 7                 flakeCount: 66, // 展示飘落数目
 8                 minSize: 6, // 最小尺寸
 9                 maxSize: 24 // 最大尺寸
10             }); 
11         }
12         floated();
13         $(window).resize(function(){ // 监听页面尺寸
14             floated();
15         })

效果图：（可参考本站效果图）