雪花飘落特效改成落下红包雨,几秒钟后雪花消失

本文介绍如何将雪花飘落特效修改为红包飘落,并控制红包显示时间。通过调整代码中的参数,实现红包在几秒后自动消失的效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

有些手机网站,进入首页会有雪花飘落,或者其他什么飘落,雪花飘落特效是网上找的一个插件,链接:www.bvbcode.com/cn/btqof3gv-893846-down
现在有一个需求,将雪花改成红包,但是红包不要一直飘,只需要飘几秒钟,几秒钟之后红包消失。因此在雪花飘落特效的基础上进行修改。
飘落图片的大小是随机的,如下图,红框里为随机生成的大小,最小值为5,最大值为10,可根据自己的需求修改最大值和最小值。绿框为图片设置大小。
在这里插入图片描述
下图为雪花飘落的核心,修改的地方在这里。
在这里插入图片描述
如下图为修改后的代码,添加第三个参数t,t为选填,若有值,必须大于3000毫秒。
在这里插入图片描述

完整代码,项目为移动端项目,这边的单位是rem。

/* 
 *  雪花飘落特效
 *  调用: createSnow('', 60, 6000);
 *  此函数接受2个参数:
 *  第一个:雪花图片目录的路径;
 *  第二个:雪花的最大数量,请不要将此数字设置为60以上,因为它会影响性能
 *  第三个:若有填写值,则几毫秒之后不再创建图片,值必须大于3000;若无值,则默认雪花一直飘落
 */
(function() {
	var m ;
	function k(a, b, c) {
		if (a.addEventListener) {
			a.addEventListener(b, c, false);
		} else {
			a.attachEvent && a.attachEvent("on" + b, c);
		} 
	}
	function g(a) {
		if (typeof window.onload != "function") {
			window.onload = a;
		} else {
			var b = window.onload;
			window.onload = function() {
				b();
				a()
			}
		}
	}
	function h() {
		var a = {};
		for (type in {Top: "",Left: ""}) {
			var b = type == "Top" ? "Y" : "X";
			if (typeof window["page" + b + "Offset"] != "undefined") {
				a[type.toLowerCase()] = window["page" + b + "Offset"];
			} else {
				b = document.documentElement.clientHeight ? document.documentElement : document.body;
				a[type.toLowerCase()] = b["scroll" + type]
			}
		}
		return a;
	}
	function l() {
		var a = document.body;
		var b;
		if (window.innerHeight) {
			b = window.innerHeight;
		} else if (a.parentElement.clientHeight) {
			b = a.parentElement.clientHeight;
		} else if (a && a.clientHeight) {
			b = a.clientHeight;
		} 
		return b
	}
	function i(a) {
		this.parent = document.body;
		this.createEl(this.parent, a);
		this.size = Math.random() * 30 + 20;
		this.el.style.width = Math.round(this.size)/75 + "rem";
		// this.el.style.height = Math.round(this.size)/75 + "rem";
		this.maxLeft = document.body.offsetWidth - this.size;
		this.maxTop = document.body.offsetHeight - this.size;
		this.left = Math.random() * this.maxLeft;
		this.top = h().top + 1;
		this.angle = 1.4 + 0.2 * Math.random();
		this.minAngle = 1.4;
		this.maxAngle = 1.6;
		this.angleDelta = 0.01 * Math.random();
		// this.speed = 2 + Math.random();
		var dpr = document.getElementsByTagName("html")[0].getAttribute("data-dpr");
		if(dpr=="2") {
			this.speed = 8 + Math.random();
		} else if(dpr=="3") {
			this.speed = 12 + Math.random();
		} else {
			this.speed = 3 + Math.random();
		}
		
	}
	var j = false;
	g(function() {
		j = true
	});
	var f = true;
	window.createSnow = function(a, b, t) {
		if (j) {
			var c = [];
			var m = setInterval(function() {
				f && b > c.length && Math.random() < b * 0.0025 && c.push(new i(a));
				!f && !c.length && clearInterval(m);
				for (var e = h().top, n = l(), d = c.length - 1; d >= 0; d--) {
					if (c[d]) {
						if (c[d].top < e || c[d].top + c[d].size + 1 > e + n) {
							c[d].remove();
							c[d] = null;
							c.splice(d, 1);
						} else {
							c[d].move();
							c[d].draw();
						}
					}
				}
			}, 40);
			k(window, "scroll", function() {
				for (var e = c.length - 1; e >= 0; e--) {
					c[e].draw();
				}
			});
			if(t>3000||t!='0'||t!=null||t!=undefined) {

				setTimeout(function () {
					clearInterval(m);
					setInterval(function(){
						for (var e = h().top, n = l(), d = c.length - 1; d >= 0; d--) {
							if (c[d]) {
								if (c[d].top < e || c[d].top + c[d].size + 1 > e + n) {
									c[d].remove();
									c[d] = null;
									c.splice(d, 1);
								} else {
									c[d].move();
									c[d].draw();
								}
							}
						}
					},40)
					return;
				}, t);
			}
		} else {
			g(function () {
				createSnow(a, b, t)
			});
		} 
	};
	window.removeSnow = function() {
		f = false;
	};
	i.prototype = {
		createEl: function(a, b) {
			this.el = document.createElement("img");
			// this.el.setAttribute("src", b + "images/hbs/snow" + Math.floor(Math.random() * 4) + ".gif");
			// this.el.setAttribute("src", b + "images/hbs/wow" + Math.floor(Math.random() * 4) + ".png");
			this.el.setAttribute("src", b + "red.jpg");
			this.el.style.position = "absolute";
			this.el.style.display = "block";
			this.el.style.zIndex = "99999";
			this.parent.appendChild(this.el);
			// this.el.setAttribute("data-img","img");
		},
		move: function() {
			if (this.angle < this.minAngle || this.angle > this.maxAngle) {
				this.angleDelta = -this.angleDelta;
			} 
			this.angle += this.angleDelta;
			this.left += this.speed * Math.cos(this.angle * Math.PI);
			this.top -= this.speed * Math.sin(this.angle * Math.PI);
			if (this.left < 0) {
				this.left = this.maxLeft;
			} else if (this.left > this.maxLeft) {
				this.left = 0;
			}
		},
		draw: function() {
			this.el.style.top = Math.round(this.top) + "px";
			this.el.style.left = Math.round(this.left) + "px"
		},
		remove: function() {
			this.parent.removeChild(this.el);
			this.parent = this.el = null
		}
	}
})();
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值