javascript - 红包雨H5实现方法
巴扎黑
巴扎黑 2017-04-11 09:49:25
[JavaScript讨论组]

好多电商都会有红包雨的活动,就是红包从屏幕上方飘落,在京东上抓包找到了一个抓螃蟹的例子,网址为:http://h5.m.jd.com/active/kpd...
查看被压缩的代码,觉得,是通过js动态设置transform属性值。但是从性能方面看,频繁的dom读取并不好,不知道具体是如何实现的。还有红包到屏幕的边缘会隐藏,这个是如何实现的。麻烦大神们能给个解答~
把我的问题重新整理一下:
1、频繁的dom操作,来设置css属性,产生一个位移值,实现红包下落的效果是否可行。
2、如何做到红包下落到边缘,红包隐藏的?
ps:扒代码的不想要,只想了解原理。如果能提供github上开源代码,就再好不过了!

巴扎黑
巴扎黑

全部回复(3)
PHPz

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

PHP中文网

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

大家讲道理

看到原文的最新连接了

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号