樹葉飄落、雪花飄落等同時多個圖片飄落

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

轉載時請注明出處及相應鏈接，本文永久地址：https://www.cnblogs.com/wangxiaoling/p/9290821.html，文章標題備注轉載，如：xxx【轉載】,謝謝！