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

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【转载】,谢谢！

转载于:https://www.cnblogs.com/wangxiaoling/p/9290821.html

树叶飘落、雪花飘落等同时多个图片飘落相关推荐

java飘落的雪花_[Java教程]树叶飘落、雪花飘落等同时多个图片飘落
[Java教程]树叶飘落.雪花飘落等同时多个图片飘落 0 2018-07-10 04:00:54 snowfall.jquery.js是树叶等图片飘落的插件,但是只支持一种图片的飘落效果,但是我遇到的 ...
html全屏飘雪花特效,html5 3D飘落雪花动画特效
特效描述:html5 3D飘落雪花动画.雪花动画代码结构 1. 引入JS 2. HTML代码雪花飘落场景特效 body { margin: 0; padding: 0; position: rel ...
自动客服回复HTML源码+立体飘落雪花动画特效HTML源码
简介: 1.自动客服回复HTML源码(打开html文件进行修改编辑更换你需要回复的消息内容) 点击最右下角的消息图标进行访问返回的内容需在kefu.html进行修改即可 : 2.立体飘落雪花动画特效 ...
html、css、javascript简单三剑客实现樱花飘落\雪花飘落特效汇总
前言素材来源于网络稍作修改侵删如果觉得复制下面运行有问题或者嫌麻烦可以直接下载源代码欢迎fork.star 樱花下落特效预览话不多说,直接上代码 <!DOCTYPE html> ...
用python画雪花飘落_python实现雪花飘落效果实例讲解
在学习pygame模块过程中,我们可以通过使用 pygame模块实现很多功能性的东西,但是很多人应该没有利用pygame实现过雪花飘落的效果吧,有时候可能是不知道从何入手或者是没有时间写,接下来我就教 ...
python实现雪花飘落效果_python实现雪花飘落效果实例讲解及源码分享！
点击蓝字"python教程"关注我们哟! 前言 Python现在非常火,语法简单而且功能强大,很多同学都想学Python!所以小的给各位看官们准备了高价值Python学习视频教程及 ...
python实现雪花动态图_python实现雪花飘落效果
在学习pygame模块过程中,我们可以通过使用 pygame模块实现很多功能性的东西,但是很多人应该没有利用pygame实现过雪花飘落的效果吧,有时候可能是不知道从何入手或者是没有时间写,接下来我就教 ...
python做雪花飘落_python实现雪花飘落效果实例讲解
在学习pygame模块过程中,我们可以通过使用 pygame模块实现很多功能性的东西,但是很多人应该没有利用pygame实现过雪花飘落的效果吧,有时候可能是不知道从何入手或者是没有时间写,接下来我就教 ...
python语言雪花_python实现雪花飘落效果实例讲解
在学习pygame模块过程中,我们可以通过使用 pygame模块实现很多功能性的东西,但是很多人应该没有利用pygame实现过雪花飘落的效果吧,有时候可能是不知道从何入手或者是没有时间写,接下来我就教 ...

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

树叶飘落、雪花飘落等同时多个图片飘落相关推荐

最新文章

热门文章