//每一個紅包都是相對于父元素定位，通過z-index來設(shè)置層級

let zIndex = 1;

function bindEvent() {

$redPackage.on('click','.js-RedPackageBox',function() {

//拿到每個紅包的數(shù)據(jù)

const data = $(this).data('txt');

}

}

//生成mix-max的隨機(jī)數(shù)

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);

//紅包攜帶的數(shù)據(jù)

const txt = keyList.shift();

keyList.push(txt);

$newNode.attr('data-txt',JSON.stringify(txt));

//紅包隨機(jī)旋轉(zhuǎn)-30～30度

$newNode.css({

'z-index': zIndex++,left: getRandom(basePadding,maxLeftPx) + 'px',transform: 'rotate(' + getRandom(-30,30) + 'deg)',});

$redPackage.append($newNode);

redPackageBoxSpeed($newNode,4);

}

//紅包的動態(tài)創(chuàng)建

function createRedPackageRain() {

setInterval(() => {

createRedPackageNode();

},300);

}

function ready() {

bindEvent();

createRedPackageRain();

}

ready();

總結(jié)

以上是生活随笔為你收集整理的红包雨效果html,js+css实现红包雨效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。