原生实现红包雨插件red-envelope-rain-animation,支持npm安装使用

背景:

每逢假节日  红包雨(福袋雨)营销活动因与用户互动性高,所以比较常见。用的频率较高,因此抽象出来一个插件。提高前端编码及快速迭代上线效率。

支持程度:

原生 js 实现,可支持跨框架(vue,react等)(微信小程序除外,小程序不存在dom,无法支持dom操作api)。

可直接script引用,也可import引入,具体请看使用说明。

你可通过传入的参数来控制红包雨时长,红包雨下降速度,红包图片等,定制符合你的业务场景!~

效果图:

使用说明:

# 使用方式 1(支持 import 项目):

更改:
red-wrap-rain.js 文件将 RedWrapRain 类 export 暴露出去
`export default class RedWrapRain extends Img{}`

引入:
`import RedWrapRain from './redWrapRain/red-wrap-rain.js';`

需要调用的地方 定义关于红包雨的参数,实例化红包雨类,传入红包雨完毕后的回调处理函数
`	let params = {};
		let rwr = new RedWrapRain(params);
		rwr.start((redPacketsCount) => {
			// console.log('回调红包个数', redPacketsCount);
	});
    `
# 使用方式 2(原生写法):

引入:
`<script src="./redWrapRain/red-wrap-rain.js"></script>`
传参并实
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值