实现红包雨的效果的源码:
// 红包雨代码 开始
// 添加遮罩层
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: 26 }); // 创建具有指定长度的数组
// 获取根元素的字体大小(以像素为单位)
const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
// 获取 app 元素的像素宽度
const appWidthPx = document.getElementById('app').offsetWidth;
// 将像素宽度转换为 rem 值
const appWidthRem = appWidthPx / rootFontSize;
console.log(appWidthRem,'输出 app 元素的宽度(以 rem 为单位)'); // 输出 app 元素的宽度(以 rem 为单位)
const maxLeft = appWidthRem > 0 ? appWidthRem - 3 : document.body.offsetWidth - 40;
// 将 rem 转换为像素
const maxLeftPx = maxLeft * rootFontSize;
console.log(maxLeftPx,'maxLeftPx')
console.log(maxLeft,'maxLeft')
// 添加遮罩层
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() * maxLeftPx}px`;
img.style.animationDuration = `${Math.random() * 2 + 2}s`;
img.style.animationDelay = `${i * 0.1}s`; // 设置不同的延迟时间
container.appendChild(img);
}
// 在项目body节点上挂载container红包雨
document.body.appendChild(container);
// 设置定时器,在四秒后移除红包雨和遮罩层
// setTimeout(() => {
// removeOverlay();
// container.remove();
// }, 4000);
}
const closeRain = () => {
console.log('关闭红包雨')
removeOverlay();
let container = document.getElementsByClassName('container')[0];
container.remove();
}
// 红包雨代码 结束
// 分享按钮
const shareDialog = async () => {
console.log('点击了分享按钮')
if (isInGenerated()) {
if (!checkLogin()) {
login()
return
}
// 判断是不是财新app
if (getCookie('appType')) {
// const {shareImg,shareSubtitle,shareTitle} = await getData()
const res = await getData()
const {id,shareImg,shareSubtitle,shareTitle} = res
console.log(id,shareImg,shareSubtitle,shareTitle,'id,shareImg,shareSubtitle,shareTitle')
// let shareImgString = encodeURIComponent(shareImg)
// let string = `{\"id\":\"118\",\"title\":\"${shareTitle}\",\"articleTag\":\"#a6\",\"articleAbstract\":\"${shareSubtitle}\",\"share_type\":\"7\",\"url\":\"https:\/\/companies.com\/2022-10-24\/101955017.html\",\"picture_url\":\"${shareImgString}\"}`
// // console.log(string,'string')
// caixin.showNativeShare(string)
// caixin.shareWebContent()
// const imgUrl = "https://fd.com/group1/M00/00/15/xxx.jpg";
// const modifiedUrl = imgUrl.replace(/\//g, "\\");
// 输出修改后的URL
// console.log(modifiedUrl);
// let string = `{\"id\":\"118\",\"title\":\"${shareTitle}\",\"articleTag\":\"#a6\",\"articleAbstract\":\"${shareSubtitle}\",\"share_type\":\"7\",\"url\":\"https:\/\/companies.com\/2022-10-24\/101955017.html\"}`
// // console.log(string,'string')
// cai.showNativeShare(string)
// cai.shareWebContent()
// let title = JSON.stringify(shareTitle)
// let newTitle = "\"" + title + "\"";
// console.log(title,'title')
// console.log(newTitle,'newTitle')
// let string = `{\"id\":\"467064\",\"title\":${newTitle},\"articleTag\":\"#a6\",\"articleAbstract\":\"价格确实超出一般旅客的承受能力\",\"share_type\":\"1\",\"url\":\"https:\/\/xxx.xxx.com\/2022-10-24\/101955017.html\"}`
// caixin.showNativeShare(string)
// caixin.shareWebContent()
console.log(id,'id')
let title = JSON.stringify(shareTitle)
console.log(title,'title')
let newTitle = "\"" + title + "\"";
console.log(newTitle,'newTitle')
let lastTitle = title.replace(/"/g, '');
console.log(lastTitle,'lastTitle'); // 输出: title
let subtitle = JSON.stringify(shareSubtitle)
console.log(subtitle,'subtitle');
let lastSubtitle = subtitle.replace(/"/g, '');
console.log(lastSubtitle,'lastSubtitle'); //摘要最后版本
let img = JSON.stringify(shareImg)
console.log(img,'img');
let lastImg = img.replace(/"/g, '');
console.log(lastImg,'lastImg'); //url
let string = `{\"id\":\"${id}\",\"title\":\"${lastTitle}\",\"articleTag\":\"#a6\",\"articleAbstract\":\"${lastSubtitle}\",\"share_type\":\"7\",\"url\":\"https:\/\/huodong.cai.com\/market\/activity\/xxx\",\"pic_url\":\"${lastImg}\"}`
console.log(string,'string')
cai.showNativeShare(string)
cai.shareWebContent()
} else {
// console.log(this.data,'this.data?')
addPopup()
setTimeout(() => {
removePopup()
}, 3000);
}
}
}
const addPopup = () => {
console.log('触发了添加popup遮罩层')
// 遮罩层添加
const popup = document.createElement('div');
popup.className = 'popup';
popup.style.position = 'fixed';
popup.style.top = '0';
popup.style.left = '0';
popup.style.width = '100%';
popup.style.height = '100%';
popup.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
popup.style.zIndex = '20';
document.body.appendChild(popup);
// 遮罩层下面的img添加
var shareDiv = document.createElement("div");
// 设置div元素的class属性
shareDiv.className = "share-img";
// 创建一个img元素
var img = document.createElement("img");
// 设置img元素的src和alt属性
img.src = "./pic_share-new.png";
img.alt = "";
// 将img元素添加到div元素中
shareDiv.appendChild(img);
// 创建文案p标签
var p = document.createElement("p");
// 给p标签添加文案
p.textContent = '点击分享'
// 将文案添加到DOM中的元素上面share-img
shareDiv.appendChild(p);
// 将div元素添加到DOM中的某个元素中
popup.appendChild(shareDiv);
}
// 移除遮罩层
const removePopup = () => {
const popup = document.querySelector('.popup');
if (popup) {
popup.remove();
}
}
这是实现红包雨的源码.