东莞市盛裕绒艺玩具有限公司

东莞市盛裕绒艺玩具有限公司

久发国际

18500536094
联系方式
全国服务热线: 18500536094

咨询热线:15265772353
联系人:张月
地址:山东省青州市经济开发区海岱北路银泰街东339号

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

来源:久发国际   发布时间:2019-07-17   点击量:396

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

相关产品

COPYRIGHTS©2017 久发国际 ALL RIGHTS RESERVED 备案号:396