飘落动画效果插件引用:
<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 })
效果图:(可参考本站效果图)