红包雨效果html,js+css实现红包雨效果

//每一个红包都是相对于父元素定位,通过z-index来设置层级

let zIndex = 1;

function bindEvent() {

$redPackage.on('click','.js-RedPackageBox',function() {

//拿到每个红包的数据

const data = $(this).data('txt');

}

}

//生成mix-max的随机数

function getRandom(min,max) {

return Math.round(Math.random() * (max - min) + min);

}

//红包的移动

function redPackageBoxSpeed($el,time) {

$el.animate(

{

top: '130%',},time * 1000,function() {

$el.remove();

}

);

}

//生成红包

function createRedPackageNode() {

const $newNode = $redPackageBox.clone(true);

//红包携带的数据

const txt = keyList.shift();

keyList.push(txt);

$newNode.attr('data-txt',JSON.stringify(txt));

//红包随机旋转-30~30度

$newNode.css({

'z-index': zIndex++,left: getRandom(basePadding,maxLeftPx) + 'px',transform: 'rotate(' + getRandom(-30,30) + 'deg)',});

$redPackage.append($newNode);

redPackageBoxSpeed($newNode,4);

}

//红包的动态创建

function createRedPackageRain() {

setInterval(() => {

createRedPackageNode();

},300);

}

function ready() {

bindEvent();

createRedPackageRain();

}

ready();

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/349880.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Delphi下实现全屏快速找图找色 二、矩阵遍历

二、矩阵遍历  矩阵遍历是一个数据结构方面的问题。假设有一个矩阵Matrix,它共有RowCount行,每行有ColCount列,当利用y表示行数,x表示列数,那么利用Matrix[y,x]就可以访问矩阵中的任意元素。假设有一个1010大小的矩阵…

Eclipse MicroProfile:您需要了解的5件事

针对微服务架构优化企业Java Eclipse MicroProfile计划是在JavaOne 2016上发起的,JavaOne是服务器供应商和Java用户组的创意,目的是解决企业Java微服务领域的缺点。 Java EE的发布速度减慢到无法应对Swift发展的微服务趋势的挑战的程度。 MicroProfile通…

html 选择不能重复,人生,就是一次无法重复的选择(深度好文)

作者:彩云追月欧洲著名的政治家托马斯 莫尔说:“在人生中最艰难的是选择”。漫漫人生路,有无数的选择,不同的选择,可能会决定我们不同的人生道路。下面的故事也许对你有所启迪:一天,几个学生问…

用HTML做软件UI用到的的一些技术

做WEB开发的想把网页做成应用程序的界面,开发应用程序的又想把程序界面做得和WEB一样。本文介绍一下用HTML做软件UI用到的的一些技术。 其实HTML UI也不是什么新鲜事了,Norton Antivirus从几年前的版本就开始用了,vs.net2002中的开始页也用了…

html css导航栏字体图标,HTML+CSS入门之两种图标字体库

本篇教程介绍了HTMLCSS入门之两种图标字体库&#xff0c;希望阅读本篇文章以后大家有所收获&#xff0c;帮助大家HTMLCSS入门。<## 0. 前言比较基础的图标加载&#xff1a;和块元素的背景background: url(./x.png).页面多图标时&#xff0c;使用雪碧图(多个png压缩成一个png…

垃圾收集算法,垃圾收集器_弱,弱,最弱,利用专家参考来管理垃圾收集器

垃圾收集算法,垃圾收集器何时以及何时不使用Java中的专家引用 弱引用&#xff0c;软引用和幻像引用既危险又强大。 如果以错误的方式使用它们&#xff0c;则会破坏JVM性能。 但是&#xff0c;如果使用正确的方法&#xff0c;它们可以大大提高性能和程序清晰度。 弱引用和软引用…

ESP8266—“ICACHE_FLASH_ATTR”宏

问&#xff1a;ESP8266_NONOS_SDK中ICACHE_FLASH_ATTR宏的用途是什么&#xff1f;我看到它取决于ICACHE_FLASH&#xff0c;但我不知道何时应该定义该符号。什么时候需要包括它&#xff1f;答&#xff1a;对于ESP8266_NONOS_SDK&#xff0c;用ICACHE_FLASH_ATTR编译的函数编译到…

layui网页html编辑器,layui使用富文本编辑器

HTML代码&#xff1a;这里的原理是你输入的内容会经过处理插入到文本区域textarea中js代码&#xff1a;/*** 文本编辑器*/layui.use([form, layedit], function(){var layedit layui.layedit;//上传图片,必须放在 创建一个编辑器前面layedit.set({uploadImage: {url: upload /…

Java应用程序性能监视:复杂的分布式应用程序的端到端性能

通过从应用程序中学习企业APM产品&#xff0c;发现更快&#xff0c;更高效的性能监控。 参加AppDynamics APM导览&#xff01; 在最复杂和分布式环境中端到端监视Java应用程序性能-专注于业务事务。 自动发现的业务交易&#xff0c;动态基准&#xff0c;代码级诊断和虚拟作战室…

C#设计模式(2)——简单工厂模式

一、引言 这个系列也是自己对设计模式的一些学习笔记,希望对一些初学设计模式的人有所帮助的,在上一个专题中介绍了单例模式,在这个专题中继续为大家介绍一个比较容易理解的模式——简单工厂模式。 二、简单工厂模式的介绍 说到简单工厂&#xff0c;自然的第一个疑问当然就是什…

计算机应用基础课程基本要求,计算机应用基础课程标准

《计算机应用基础》课程标准一、课程性质&#xff1a;《计算机应用基础》课程是中职学校各专业学生必修的一门公共基础课程&#xff0c;具有很强的实践性和应用性&#xff0c;是各行各业从事现代化办公、计算机设计及应用等领域人材所必须具备的理论知识和实践技能。通过本课程…

S3C2410 bootloader ----VIVI阅读笔记 (转)下

1 static inline void mem_mapping_linear(void) 2 { 3 unsigned long pageoffset, sectionNumber; 4 putstr_hex("MMU table base address 0x", (unsigned long) mmu_tlb_base); 5 /* 4G 虚拟地址映射到相同的物理地址. not cacacheable, no…

华南理工网络计算机基础知识,2019年华南理工大学网络教育计算机基础随堂练习题第一章.docx...

计算机基础知识第一节 计算机的基本概念随堂练习提交截止时间&#xff1a;2019-06-15 23:59:59本次练习有题&#xff0c;你已做题&#xff0c;已提交题&#xff0c;其中答对题。当前页有6题&#xff0c;你已做6题&#xff0c;已提交6题&#xff0c;其中答对6题。1.(单选题)? 计…

orm jdbc_Spring Data JDBC通用DAO实现–迄今为止最轻量的ORM

orm jdbc我很高兴宣布Spring Data JDBC存储库项目的第一个版本。 这个开源库的目的是为基于Spring框架中 JdbcTemplate关系数据库提供通用&#xff0c;轻量且易于使用的DAO实现&#xff0c;与项目的Spring Data 框架兼容。 设计目标 轻巧&#xff0c;快速且开销低。 只有少数几…

NOIP模拟测试9「随·单·题」

liu_runda出的题&#xff0c;先$\%\%\%\%\%\%\%\%\%\%\%$为敬 随 考试时没有Qj 然后甚至没做,甚至没交 我不知道我怎么想的 这个题挺难改 你需要用到 循环矩阵快速幂,矩阵快速幂优化,打表找规律的基础 题解 首先我们可以列出来一个普通的dp式子 设f为第i次操作,操作后x变为j的概…

es5直接引入html文件,ES6+转ES5(webpack+babel、指定多个js文件、自动注入)

接续上篇ES6转ES5&#xff0c;本篇将使用webpack和babel将多个不同目录下指定的多个ES6语法的js文件编译为ES5&#xff0c;并将编译后的文件配置注入对应的html文件。一、新建项目&#xff0c;目录如下二、执行命令初始化项目cnpm init -y执行成功后会生成文件&#xff1a;pack…

在Spring MVC中,InternalResourceViewResolver做什么?

InternalResourceViewResolver是Spring MVC框架中ViewResolver一个实现&#xff0c;它将逻辑视图名称&#xff08;例如“ hello”&#xff09;解析为内部物理资源&#xff08;例如Servlet和JSP文件&#xff0c;例如放置在WEB-INF文件夹下的jsp文件&#xff09;。 它是UrlBasedV…

深圳敏捷云计算机科技,敏捷云 | 关于我们 | 敏捷云

(93) Afghanistan(355) Albania(213) Algeria(1) American Samoa(376) Andorra(244) Angola(1) Anguilla(1) Antigua(54) Argentina(374) Armenia(297) Aruba(61) 澳大利亚(43) Austria(994) Azerbaijan(973) Bahrain(880) Bangladesh(1) Barbados(375) Belarus(32) Belgium(50…

算法:用户喜好--Map与List配合下的查找

提示&#xff1a;在算法处理过程中&#xff0c;未必就要将出现在前面的作为关键字检索。比如本题&#xff0c;非得先去检索范围&#xff0c;再去判断范围中key的个数。反其道而行&#xff0c;把输入的数字当作关键字&#xff0c;组成Map package test;import java.util.ArrayLi…

带有Gradle的Spring Boot Web应用程序

1.简介 在继续使用Gradle创建演示Spring Boot Web应用程序之前&#xff0c;我假设我们已经准备好使用Gradle设置 。 摇篮设置指南 Gradle官方网站 2.创建演示应用程序 现在我们已经准备好安装插件&#xff0c;创建一个新的Gradle项目&#xff0c;如下所示– 单击下一步 &am…