标签：雪花 this nta fun alt script tps tee 调用
snowfall.jquery.js是树叶等图片飘落的插件，但是只支持一种图片的飘落效果，但是我遇到的情况需要飘落未知数种类的图片，即图片有多种；那么就要对原插件做些修改；
在原snowfall.js找到下面代码：
if(defaults.image){ flakeObj = new Image(); flakeObj.src = defaults.image; }else{ flakeObj = document.createElement(‘div‘); setStyle(flakeObj, {‘background‘ : defaults.flakeColor}); }
将上面代码修改成：
if (options.image) { flakeMarkup = $(document.createElement("img")); var num = Math.floor(Math.random()*options.image.length); flakeMarkup[0].src = options.image[num]; } else { flakeMarkup = $(document.createElement("div")); flakeMarkup.css({ ‘background‘: options.flakeColor }); }
修改前原插件中的 options.image是一个图片地址，修改后 options.image是一组图片地址的数组；下面介绍调用方法：
引入js:
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="js/snowfall.js"></script>
html:开关用来控制开启和关闭
<div id="leafContainer" style="height:100%"> <button class="switchBtn">开关</button> </div>
调用js操作:
function init() { var img_url = []; for(var i=1;i<=6;i++){ var s_url = ‘images/hb_0‘+i+‘.png‘; img_url.push(s_url); } $("#leafContainer").snowfall({ image: img_url, //img_url 图片地址数组 flakeCount:20, minSize: 20, maxSize: 30, maxSpeed : 3, }); } $(".switchBtn").click(function(){ var $this = $(this); var isClose = $this.hasClass("close"); if(isClose){ $this.removeClass("close") init() //开启 } else { $this.addClass("close") $(‘#leafContainer‘).snowfall(‘clear‘); //关闭 } }) init();//初始
$("#leafContainer").snowfall(); 初始化、开启特效操作；
$(‘#leafContainer‘).snowfall(‘clear‘); 关闭操作
git源码地址：https://github.com/erinwxl/imgfall
标签：雪花 this nta fun alt script tps tee 调用
原文地址：https://www.cnblogs.com/wangxiaoling/p/9290821.html
