js+css实现红包雨效果

2023-09-10 10:19:05 304

const$redPackage=$('.js-RedPackage'); const$redPackageBox=$('.js-RedPackageBox'); constredPackageWidth=$redPackage.width(); constredPackageBoxWidth=$redPackageBox.width(); //因为红包有角度旋转的问题，所以需要计算一下，避免旋转之后溢出屏幕 constbasePadding=30; constmaxLeftPx=redPackageWidth-redPackageBoxWidth-basePadding*2; //每一个红包都是相对于父元素定位，通过z-index来设置层级 letzIndex=1; functionbindEvent(){ $redPackage.on('click','.js-RedPackageBox',function(){ //拿到每个红包的数据 constdata=$(this).data('txt'); } } //生成mix-max的随机数 functiongetRandom(min,max){ returnMath.round(Math.random()*(max-min)+min); } //红包的移动 functionredPackageBoxSpeed($el,time){ $el.animate( { top:'130%', }, time*1000, function(){ $el.remove(); } ); } //生成红包 functioncreateRedPackageNode(){ const$newNode=$redPackageBox.clone(true); //红包携带的数据 consttxt=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); } //红包的动态创建 functioncreateRedPackageRain(){ setInterval(()=>{ createRedPackageNode(); },300); } functionready(){ bindEvent(); createRedPackageRain(); } ready();

js+css实现红包雨效果

热门推荐

随机推荐