h5红包雨代码_红包雨H5实现方法

好多电商都会有红包雨的活动，就是红包从屏幕上方飘落，在京东上抓包找到了一个抓螃蟹的例子，网址为:http://h5.m.jd.com/active/kpd…

查看被压缩的代码，觉得，是通过js动态设置transform属性值。但是从性能方面看，频繁的dom读取并不好，不知道具体是如何实现的。还有红包到屏幕的边缘会隐藏，这个是如何实现的。麻烦大神们能给个解答~

把我的问题重新整理一下：

1、频繁的dom操作，来设置css属性，产生一个位移值，实现红包下落的效果是否可行。

2、如何做到红包下落到边缘，红包隐藏的？

ps:扒代码的不想要，只想了解原理。如果能提供github上开源代码，就再好不过了！

去找一个微信飞机大战的js，把核心代码扣出来就是你想要的。

如果是红包雨的话，感觉是先计算出页面的宽度和高度，确保红包出现或者消失的都在这个页面里面，然后用transition来确定下落时间，用translate确定下落距离。这是我自己的理解。

1.使用

DOM

来模拟是可行的，不过频繁操作

DOM

效果可能比使用

canvas

要差一点，最主要的是要注意红包出了可视区域一定要

remove

掉，

DOM

元素以及绑定的事件都需要

remove

，不然会造成内存泄漏，页面异常卡顿。

2.碰撞检测，每个红包是一个对象，检测该对象是否在可视区域，可以通过该对象的x, y与浏览器的宽、高进行比较，具体逻辑不再赘述。

提供两个repo吧：

1.https://github.com/navyxie/re… 基于

canvas

实现的，本地跑的时候注意修改下’index.html’中引用

js

路径，路径写错了。

2.https://github.com/kopipejst/… 基于

DOM

实现的，可以直接看在线demo。

看到原文的最新连接了