js+css实现红包雨

最新推荐文章于 2024-07-09 18:15:00 发布

「已注销」

最新推荐文章于 2024-07-09 18:15:00 发布

阅读量1w

点赞数 1

分类专栏：前端文章标签： js红包雨

本文链接：https://blog.csdn.net/jianruoche/article/details/79296596

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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