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 操作Word和Excel的实现代码
Oct 26 Javascript
javascript getElementsByClassName函数
Apr 01 Javascript
Javascript Boolean、Nnumber、String 强制类型转换的区别详细介绍
Dec 13 Javascript
Javascript全局变量var与不var的区别深入解析
Dec 09 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
Aug 11 Javascript
JS实现网页上随机产生超链接地址的方法
Nov 09 Javascript
EasyUi combotree 实现动态加载树节点
Apr 01 Javascript
ionic实现滑动的三种方式
Aug 27 Javascript
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
Nov 30 Javascript
form表单序列化详解(推荐)
Aug 15 Javascript
详解node+express+ejs+bootstrap构建项目
Sep 27 Javascript
详解Vue 动态组件与全局事件绑定总结
Nov 11 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之面向对象
2013/05/15 PHP
PHP加密函数 Javascript/Js 解密函数
2013/09/23 PHP
destoon实现商铺管理主页设置增加新菜单的方法
2014/06/26 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
PHP解密支付宝小程序的加密数据、手机号的示例代码
2021/02/26 PHP
JS效率个人经验谈(8-15更新),加入range技巧
2007/01/09 Javascript
Javascript模板技术
2007/04/27 Javascript
js设置组合快捷键/tabindex功能的方法
2013/11/21 Javascript
JQuery结合CSS操作打印样式的方法
2013/12/24 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
2015/08/25 Javascript
JS实现动态增加和删除li标签行的实例代码
2016/10/16 Javascript
ES6新特性四:变量的解构赋值实例
2017/04/21 Javascript
JQuery 封装 Ajax 常用方法(推荐)
2017/05/21 jQuery
vue 父组件通过v-model接收子组件的值的代码
2019/10/27 Javascript
Vue 同步异步存值取值实现案例
2020/08/05 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
2020/09/24 Javascript
[01:50]WODOTA制作 DOTA2中文宣传片《HERO》
2013/04/28 DOTA
python 解析XML python模块xml.dom解析xml实例代码
2014/02/07 Python
使用Python的Supervisor进行进程监控以及自动启动
2014/05/29 Python
浅谈终端直接执行py文件,不需要python命令
2017/01/23 Python
opencv改变imshow窗口大小,窗口位置的方法
2018/04/02 Python
Python TCP通信客户端服务端代码实例
2019/11/21 Python
Pandas的数据过滤实现
2021/01/15 Python
python 利用panda 实现列联表(交叉表)
2021/02/06 Python
Vero Moda西班牙官方购物网站:丹麦BESTSELLER旗下知名女装品牌
2018/04/27 全球购物
德国圣伯纳德草药屋:Kräuterhaus Sanct Bernhard(有中文站)
2018/08/05 全球购物
英国123鲜花网站:123 Flowers
2019/07/07 全球购物
办公室主任主任岗位责任制
2014/02/11 职场文书
汽车销售员如何做职业生涯规划
2014/02/16 职场文书
教师中国梦演讲稿
2014/04/23 职场文书
自我评价优缺点范文
2015/03/11 职场文书
2016高考寄语或鼓励的话语
2015/12/04 职场文书
三严三实·严以用权心得体会
2016/01/12 职场文书
学生会2016感恩节活动小结
2016/04/01 职场文书
2019企业给员工的慰问信
2019/06/24 职场文书
Win11电脑显示本地时间与服务器时间不一致怎么解决?
2022/04/05 数码科技