js+css实现红包雨效果

本文实例为大家分享了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();

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JavaScript实现微信红包算法及问题解决方法

    专栏停更了很久,向大家说声抱歉.今天的主题是使用JavaScript模拟实现微信抢红包的算法.这个题目看起来很简单,不就是一个随机函数吗?我们一起实现看看. 我们假设有一个100元的红包,要发给10个人.为了保证公平,算法需要保证以下的原则: 每个人最少能抢到0.01元 每个人的机会平等 所有人的金额之和等于100元 1.简单的随机函数实现 很多朋友的一般思路是: 第一步:从0-100中随机一个数,得到第一个红包金额. 第二步:从0-剩余金额中随机一个数,得到第二个红包金额. 第三步:... 最

  • Javascript网页抢红包外挂实现分享

    一开始用Firefox加Firebug/YSlow插件分析,但是firefox不能运行自定义的javascript,好像还要装什么插件.于是转用chrome,发现chrome还是不错的,直接写个javascript就可以当作插件安装了. 中间淘宝还改过几次脚本,当然每次都是大同小异.佩服下苦逼的淘宝程序员,周末还要加班改脚本. 附录是我写的一个版本的脚本,直接调用 Volcano.BrickRate=1.0; Volcano.Brick.getLottery(KISSY); KISSY是一个类似

  • 基于js实现抽红包并分配代码实例

    这篇文章主要介绍了基于js实现抽红包并分配代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 将 50000元随机分给10个人,其中3个人必须分到百位数,4个人分到千位数,3个人分到万位数,每个人所得金额 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name=&

  • js canvas实现红包照片效果

    js canvas实现红包照片效果

    今天跟着学习了一个制作红包照片类似功能的demo,很有意思,所以在这里分享代码给大家,可以直接使用. 先贴出效果图大家看一下: 点击重置后会以随机一个点为圆心生成半径为50px的圆,然后显示清晰的图像: 点击显示后会全部显示清晰的图像: 功能虽然很少,但是很有意思不是吗,而且做好了适配可以在不同分辨率大小的设备上都可以玩. 只需要js+css+html就可以实现,不过需要引入jquery 下面po出完整代码: demo.html: <!DOCTYPE HTML> <html> &l

  • 基于JavaScript实现微信抢红包功能

    金额随机:额度在0.01和(剩余平均值*2)之间. /** * 抢红包 * @param {[number]} totalAmount [总金额] * @param {[number]} totalPeople [总人数] * @return {[Array]} [每个人抢到的金额] */ function assign(totalAmount, totalPeople){ var remainAmount = +totalAmount; var remainPeople = +totalPeo

  • js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能

    js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能

    最近支付宝的领红包可真是刷爆了各个微信群啊,满群都是支付宝口令. 可是这样推广可不是办法,又要复制又要打开支付宝又要点领取,太麻烦了. 于是乎,提出了一个疑问! 是否可以在微信里面点一个链接然后直接打开支付宝并自动领取呢??? 就像下面这样! 上图解说: 1.点击一个url 2.立即跳转到支付宝APP 3.并且秒领红包 对,没错,上面就是本次案例的demo 大家可以扫码体验: 实现的原理很简单 源码只有一个html文件和js文件 html只要是方便加载js index.html <!DOCTYP

  • js仿微信抢红包功能

    本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>仿微信抢红包</title> <style> html,body,div{margin:0;padding:0;} body{background:#EAEAEA;font:16px/1.8 &quo

  • 利用adb shell和node.js实现抖音自动抢红包功能(推荐)

    逻辑很简单,在抖音视频播完之后如果是红包视频,会跳出红包. 我们模拟逻辑如下: 点击屏幕中央,如果有红包打开红包,没有红包则暂停视频. 点击返回按钮,如果有红包关闭红包界面,没有红包提示再按一次退出(其实没退出). 进行上滑操作,进入下一个视频. 点击.返回.上滑,就这么三步行为,无论有红包没红包都成立,只要计算好时间就行. 代码 下面是一段 node.js 代码: touch.js var process = require('child_process'); function exec(sh

  • js+css实现红包雨效果

    本文实例为大家分享了js实现红包雨展示的具体代码,供大家参考,具体内容如下 1.html部分 红包的样子,先写一个模版在页面上 <div class="hide"> <div class="RedPackage__Box js-RedPackageBox" data-txt> <img src="./images/redPackage.png" alt=""> </div> &l

  • vue移动端实现红包雨效果

    vue移动端实现红包雨效果

    本文实例为大家分享了vue实现红包雨效果的具体代码,供大家参考,具体内容如下 下面是代码: <template> <div class="ser_home"> <ul class="red_packet" id="red_packet"> <template v-for="(item, index) in liParams"> <li :style="{ left

  • 利用JS打造黑客代码雨效果

    利用JS打造黑客代码雨效果

    目录 演示 技术栈 源码 画布 js样式设置 演示 技术栈 js实战我们也写过很多了,其中每次几乎都用到画布,大家知道它的重要性了吧.今天依旧用到它了.不过我们讲过它的用法就不多说了. 这次我们说一下window.onload window.onload() 方法用于在网页加载完毕后立刻执行的操作,即当 HTML 文档加载完毕后,立刻执行某个方法. window.onload() 通常用于 元素,在页面完全载入后(包括图片.css文件等等)执行脚本代码. 只有一个要执行的函数语法: window

  • JS+CSS实现闪烁字体效果代码

    本文实例讲述了JS+CSS实现闪烁字体效果的方法.分享给大家供大家参考,具体如下: <div id="blink">闪烁的文字</div> <script language="javascript"> function changeColor(){ var color="#f00|#0f0|#00f|#880|#808|#088|yellow|green|blue|gray"; color=color.spli

  • js+css实现扇形导航效果

    本文实例为大家分享了js+css实现扇形导航效果的具体代码,供大家参考,具体内容如下\ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>扇形导航</title> <style type="text/css"> *{ margin: 0; padding: 0; } html,body{ height: 100%;

  • js+css实现换肤效果

    js+css实现换肤效果

    本文实例为大家分享了js+css实现换肤效果的具体代码,供大家参考,具体内容如下 效果图如下: 需求:点击对应小圆点,下面内容颜色跟着改变 主要思路: 1.在css中把对应的样式先写好:2.获取小圆点给它绑定点击事件:3.获取当前点击元素的类名:4.将该类名设置给body: js主要考察的是获取属性值和设置属性值: <style>         *{             margin:0;             padding:0;             list-style: no

  • js+canvas实现代码雨效果

    js+canvas实现代码雨效果

    本文实例为大家分享了js+canvas代码雨效果的具体代码,供大家参考,具体内容如下 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{ margin: 0px; padding: 0px; } html,body{ height:

  • JS+CSS实现下拉列表框美化效果（3款）

    JS+CSS实现下拉列表框美化效果（3款）

    本文实例讲述了JS+CSS实现美化的下拉列表框效果.分享给大家供大家参考.具体如下: 三款款经过JS+CSS美化的下拉列表,效果很不错,总有一款适合你,先看看运行效果图: 效果查看 源码下载 具体代码如下: <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> &

  • JS技巧动手实现红包兔子雨效果示例详解

    目录 前言 展示效果 技术栈 思考与实现 红包下落效果 生成红包雨 打开红包效果 兔子雨效果 拓展 设置中奖概率 后记 前言 人生天地之间,若白驹过隙,忽然而已.不知不觉中,2022年已然逝去,2023年也过去了半个月了.看到「兔了个兔」这个活动几天了,不过这周比较忙,没时间参与. 心血来潮,捣鼓了一晚上,实现一个兔年的红包雨(兔子雨)效果~ 展示效果 技术栈 Vue2 SCSS:实现红包雨(兔子雨)效果.按钮交互效果等. 思考与实现 首先,思考一下最终的展示效果:在屏幕上会有很多随机下落的兔子

随机推荐