树叶飘落、雪花飘落等同时多个图片飘落

2018-07-11 03:56:26来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

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

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:POST和GET请求区别

下一篇:关于Vue-cli 跨域,即使是非自己的服务器也可以get到内容