java飘落的雪花_[Java教程]树叶飘落、雪花飘落等同时多个图片飘落
[Java教程]树叶飘落、雪花飘落等同时多个图片飘落
0
2018-07-10 04:00:54
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:
html:开关用来控制开启和关闭
调用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
本文网址:http://www.shaoqun.com/a/355328.html
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:admin@shaoqun.com。
图片
0
java飘落的雪花_[Java教程]树叶飘落、雪花飘落等同时多个图片飘落相关推荐
- java 内存泄露 书籍_[Java教程]一次艰难的内存泄露排查,BeanUtils 的锅
[Java教程]一次艰难的内存泄露排查,BeanUtils 的锅 0 2020-10-29 18:24:42 现象 通过jstat -gcutil pid 5000 ,发现fgc次数很多而且频繁,此时 ...
- java privatekey输出字符串_[Java教程]根据字符串(String)生成公钥(PublicKey)和私钥(PrivateKey)对象_星空网...
根据字符串(String)生成公钥(PublicKey)和私钥(PrivateKey)对象 2012-05-29 0 1.字符串生成公钥对象 PublicKey /** * 实例化公钥 * * @re ...
- java 基础面试 英文_[Java面试] 面试java基础总结大全
原标题:[Java面试] 面试java基础总结大全 基础知识: 1.JVM.JRE和JDK的区别: JVM(Java Virtual Machine):java虚拟机,用于保证java的跨平台的特性. ...
- java 字符串格式替换_[Java] - 格式字符串替换方法
Java 字符串格式替换方法有两种,一种是使用String.format(...),另一种是使用MessageFormat.format(...) 如下: import java.text.Messa ...
- java视、频_[java视频]感人故 事视 频网 站上那找~~~
感人故 事视 频网 站上那找~~~ 问题补充:感人故 事视 频网 站上那找~~~ ●呵呵,你问对人了,感人故事就去"新浪show",现在是新浪期下的网站,运行稳定,观看流畅,上传简 ...
- java 历遍 类_[Java] 遍历指定包名下所有的类(支持jar) | 学步园
项目需要,仅做记录. 支持包名下的子包名遍历,并使用Annotation(内注)来过滤一些不必要的内部类,提高命中精度. 通过Thread.currentThread().getContextClas ...
- java实现计算器框架_[Java小程序] 实现简单计算器
这学期没事学了一点点Java,想写个程序练手,因为只学了一点点,所以暂时只能先写个实现简单功能的计算器练练.感觉写完后不是很好,如果路过的哪位高手给点建议,小弟万分感激啊. 由于期末来了,没太多时间, ...
- java得到相对路径_[Java]JAVA获取相对路径问题的解决
1.基本概念的理解 绝对路径:绝对路径就是你的主页上的文件或目录在硬盘上真正的路径,(URL和物理路径)例如: C:xyz est.txt 代表了test.txt文件的绝对路径.http://www. ...
- java t安装配置_[JAVA] JAVA JDK 安装配置
JDK 安装 下载安装 下载JDK 从oracle官方网站下载并安装JDK. 下载使用文档 从oracle官方网站下载使用帮助文档. 安装库源文件 源文件位于安装目录的 /Library/Java/J ...
最新文章
- 【BZOJ-30391057】玉蟾宫棋盘制作 悬线法
- mybatis开发dao的方法——(三)
- rsync同步操作 、 发布rsync共享 、 inotify实时同步 、 Split分离解析
- 【C 语言】结构体 ( 结构体浅拷贝 )
- 《疯狂java讲义》6
- 少儿编程100讲轻松学python(四)-python如何判断是否为数字字符串
- __thread 和 __typeof__关键字
- Juypter 打开其他路径文件
- 吴军:为什么计算机不是万能的
- 农行2021软件开发笔试题
- 更改浏览器语言(firefox, chrome)详细步骤
- Python实现逆Radon变换——直接反投影和滤波反投影
- Java IDEA 编辑器代码前进后退快捷键
- mybatis mysql连接时区_MySQL时区的查看和设置
- 运行django代码报错ModuleNotFoundError: No module named 'myapp'如何解决
- 超强爆料:一位有良心的医生揭开献血内幕
- kubevirt 存储 网络 监控
- Pikachu漏洞练习平台----验证码绕过(on server) 的深层次理解
- 多径效应和多普勒效应
- 计算机水平熟悉情况,计算机水平如何填
热门文章
- 5寸android智能手机,5寸刚入门 六款巨屏安卓智能手机盘点(5)
- 【兴趣阅读】DeepInf: Social Influence Prediction with Deep Learning
- python 使用摄像头监测心率
- html输入框密码颜色,css解决浏览器输入框记住账号密码后的背景色
- 解决启动MySql时出现 2003 - Can't connect to MySQL server on '127.0.0.1'(10038)问题
- UCEs(超保守元件)常见问题,系统发育和进化研究新方法(即用型脊椎动物(辐鳍鱼类,鲈形目,骨鳔类) 无脊椎动物(蛛形纲,蜘蛛目,鞘翅目,双翅目,半翅目,膜翅目,鳞翅目)UCE探针,其他可定制)
- 由IRR看超越方程求解
- intel万兆以太网网卡吞吐量测试
- 2021最新短信验证码接收平台收费价格对比「二」:亿佰云、秒嘀科技、极光短信、华信云通信
- 自己动手撸一个Jlink-TinyJlink诞生记