js+css实现红包雨效果


Posted in Javascript onJuly 12, 2018

本文实例为大家分享了js实现红包雨展示的具体代码,供大家参考,具体内容如下

1.html部分

红包的样子,先写一个模版在页面上

<div class="hide">
 <div class="RedPackage__Box js-RedPackageBox" data-txt>
  <img src="./images/redPackage.png" alt="">
 </div>
</div>

显示红包的容器

<div class="RedPackage__Main js-RedPackage"></div>

2.js部分

const $redPackage = $('.js-RedPackage');
const $redPackageBox = $('.js-RedPackageBox');
const redPackageWidth = $redPackage.width();
const redPackageBoxWidth = $redPackageBox.width();
//因为红包有角度旋转的问题,所以需要计算一下,避免旋转之后溢出屏幕
const basePadding = 30;
const maxLeftPx = redPackageWidth - redPackageBoxWidth - basePadding * 2;
 
//每一个红包都是相对于父元素定位,通过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();

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一款JavaScript压缩工具:X2JSCompactor
Jun 13 Javascript
JQuery下的Live方法和$.browser方法使用代码
Jun 02 Javascript
js 去除字符串第一位逗号的方法
Jun 07 Javascript
Javascript动画的实现原理浅析
Mar 02 Javascript
JavaScript 表单处理实现代码
Apr 13 Javascript
利用JQuery直接调用asp.net后台的简单方法
Oct 27 Javascript
微信小程序 vidao实现视频播放和弹幕的功能
Nov 02 Javascript
node.js中EJS 模板快速入门教程
May 08 Javascript
Vue.js实现网格列表布局转换方法
Aug 25 Javascript
zTree树形菜单交互选项卡效果的实现方法
Dec 25 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
Sep 27 Javascript
react-intl实现React国际化多语言的方法
Sep 27 Javascript
基于vue cli 通过命令行传参实现多环境配置
Jul 12 #Javascript
vue内置组件transition简单原理图文详解(小结)
Jul 12 #Javascript
vue-resource请求实现http登录拦截或者路由拦截的方法
Jul 11 #Javascript
vue.js实现的经典计算器/科学计算器功能示例
Jul 11 #Javascript
Vue.js实现的计算器功能完整示例
Jul 11 #Javascript
JavaScript类的继承方法小结【组合继承分析】
Jul 11 #Javascript
React中嵌套组件与被嵌套组件的通信过程
Jul 11 #Javascript
You might like
php 三维饼图的实现代码
2008/09/28 PHP
PHP中的MYSQL常用函数(php下操作数据库必备)
2010/09/12 PHP
php变量作用域的深入解析
2013/06/03 PHP
如何用PHP做到页面注册审核
2017/03/02 PHP
PHP查询分页的实现代码
2017/06/09 PHP
JavaScript 组件之旅(四):测试 JavaScript 组件
2009/10/28 Javascript
JS关键字变色实现思路及代码
2013/02/21 Javascript
js 限制input只能输入数字、字母和汉字等等
2013/12/18 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
2014/09/09 Javascript
JS小游戏之仙剑翻牌源码详解
2014/09/25 Javascript
10个很棒的jQuery代码片段
2015/09/24 Javascript
JavaScript实现cookie的写入、读取、删除功能
2015/11/05 Javascript
JavaScript 函数模式详解及示例
2016/09/07 Javascript
jquery.validate表单验证插件使用详解
2017/06/21 jQuery
underscore之Collections_动力节点Java学院整理
2017/07/10 Javascript
JavaScript取得gridview中获取checkbox选中的值
2017/07/24 Javascript
浅析vue给不同环境配置不同打包命令
2018/08/17 Javascript
微信小程序使用自定义组件导航实现当前页面高亮
2020/01/02 Javascript
[48:53]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第一场
2014/05/26 DOTA
详谈Pandas中iloc和loc以及ix的区别
2018/06/08 Python
python pexpect ssh 远程登录服务器的方法
2019/02/14 Python
使用python 写一个静态服务(实战)
2019/06/28 Python
django haystack实现全文检索的示例代码
2020/06/24 Python
如何用用Python将地址标记在地图上
2021/02/07 Python
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
2014/07/21 HTML / CSS
时装界的“朋克之母”:Vivienne Westwood
2017/07/06 全球购物
Manduka官网:瑜伽垫、瑜伽毛巾和服装
2018/07/02 全球购物
酒店实习个人鉴定
2013/12/07 职场文书
期末自我鉴定
2014/02/02 职场文书
可口可乐广告词
2014/03/20 职场文书
实习生岗位职责
2014/04/12 职场文书
党员承诺书范文
2014/05/19 职场文书
学生抄作业检讨书(2篇)
2014/10/17 职场文书
2014年小学教学工作总结
2014/11/13 职场文书
2015年初一班主任工作总结
2015/05/13 职场文书
婚礼双方父亲致辞
2015/07/27 职场文书