问:
实现js红包雨效果
回答:
参考地址: html+css/19.html · 石头/js-demo - Gitee.com
上面是源代码,
我们加以修改进行实现,
首先图片:
随机选用一张当做红包雨的图片,
点击触发红包雨的按钮,
<div id="open-rain" οnclick="openRain()">
红包雨代码,
// 红包雨代码 开始
// 添加遮罩层
const addOverlay = () => {
const overlay = document.createElement('div');
overlay.className = 'overlay';
overlay.style.position = 'fixed';
overlay.style.top = '0';
overlay.style.left = '0';
overlay.style.width = '100%';
overlay.style.height = '100%';
overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
overlay.style.zIndex = '20';
document.body.appendChild(overlay);
}
// 移除遮罩层
const removeOverlay = () => {
const overlay = document.querySelector('.overlay');
if (overlay) {
overlay.remove();
}
}
// 开启红包雨
const openRain = () => {
console.log('点击了openRain');
const hongbaos = Array.from({ length: 20 }); // 创建具有指定长度的数组
const maxLeft = document.body.offsetWidth - 40;
// 添加遮罩层
addOverlay();
// 创建容器元素
const container = document.createElement('div');
container.className = 'container';
for (let i = 0; i < hongbaos.length; i++) {
const img = document.createElement('img');
img.src = './hongbao.png';
img.className = 'img';
img.style.left = `${Math.random() * maxLeft}px`;
img.style.animationDuration = `${Math.random() * 2 + 2}s`;
img.style.animationDelay = `${i * 0.5}s`; // 设置不同的延迟时间
container.appendChild(img);
}
document.body.appendChild(container);
// 设置定时器,在四秒后移除红包雨和遮罩层
setTimeout(() => {
removeOverlay();
container.remove();
}, 4000);
}
实现红包雨效果