• 微信号:wumiao_357234902
您当前的位置:首页>web前端开发>JavaScript

HTML+CSS+JavaScript爱心制作[樱花+爱心]

作者:Miao 阅读:4045次

HTML+CSS+JavaScript爱心制作[樱花+爱心]

效果图:

心.gif

HTML:

<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<script src="js/jquery.min.js"></script>
	</head>
	<style>
		* {
			padding: 0;
			margin: 0;
		}

		html,
		body {
			height: 100%;
			padding: 0;
			margin: 0;
			background: #000;
		}

		.aa {
			position: fixed;
			left: 50%;
			bottom: 10px;
			color: #ccc;
		}

		.container {
			width: 100%;
			height: 100%;
		}

		canvas {
			z-index: 99;
			position: absolute;
			width: 100%;
			height: 100%;
		}
	</style>
	<body>
		<!-- 樱花 -->
		<div id="jsi-cherry-container" class="container">
			<audio autoplay="autopaly">
				<source src="renxi.mp3" type="audio/mp3" />
			</audio>
			<img class="img" src="./123.png" alt="" />
			<!-- 爱心 -->
			<canvas id="pinkboard" class="container"> </canvas>
		</div>
	</body>
</html>

JavaScript:

<script>
	/*
	 * Settings
	 */
	var settings = {
		particles: {
			length: 500, // maximum amount of particles
			duration: 2, // particle duration in sec
			velocity: 100, // particle velocity in pixels/sec
			effect: -0.75, // play with this for a nice effect
			size: 30, // particle size in pixels
		},
	};

	(function() {
		var b = 0;
		var c = ["ms", "moz", "webkit", "o"];
		for (var a = 0; a < c.length && !window.requestAnimationFrame; ++a) {
			window.requestAnimationFrame = window[c[a] + "RequestAnimationFrame"];
			window.cancelAnimationFrame =
				window[c[a] + "CancelAnimationFrame"] ||
				window[c[a] + "CancelRequestAnimationFrame"];
		}
		if (!window.requestAnimationFrame) {
			window.requestAnimationFrame = function(h, e) {
				var d = new Date().getTime();
				var f = Math.max(0, 16 - (d - b));
				var g = window.setTimeout(function() {
					h(d + f);
				}, f);
				b = d + f;
				return g;
			};
		}
		if (!window.cancelAnimationFrame) {
			window.cancelAnimationFrame = function(d) {
				clearTimeout(d);
			};
		}
	})();

	/*
	 * Point class
	 */
	var Point = (function() {
		function Point(x, y) {
			this.x = typeof x !== "undefined" ? x : 0;
			this.y = typeof y !== "undefined" ? y : 0;
		}
		Point.prototype.clone = function() {
			return new Point(this.x, this.y);
		};
		Point.prototype.length = function(length) {
			if (typeof length == "undefined")
				return Math.sqrt(this.x * this.x + this.y * this.y);
			this.normalize();
			this.x *= length;
			this.y *= length;
			return this;
		};
		Point.prototype.normalize = function() {
			var length = this.length();
			this.x /= length;
			this.y /= length;
			return this;
		};
		return Point;
	})();

	/*
	 * Particle class
	 */
	var Particle = (function() {
		function Particle() {
			this.position = new Point();
			this.velocity = new Point();
			this.acceleration = new Point();
			this.age = 0;
		}
		Particle.prototype.initialize = function(x, y, dx, dy) {
			this.position.x = x;
			this.position.y = y;
			this.velocity.x = dx;
			this.velocity.y = dy;
			this.acceleration.x = dx * settings.particles.effect;
			this.acceleration.y = dy * settings.particles.effect;
			this.age = 0;
		};
		Particle.prototype.update = function(deltaTime) {
			this.position.x += this.velocity.x * deltaTime;
			this.position.y += this.velocity.y * deltaTime;
			this.velocity.x += this.acceleration.x * deltaTime;
			this.velocity.y += this.acceleration.y * deltaTime;
			this.age += deltaTime;
		};
		Particle.prototype.draw = function(context, image) {
			function ease(t) {
				return --t * t * t + 1;
			}
			var size = image.width * ease(this.age / settings.particles.duration);
			context.globalAlpha = 1 - this.age / settings.particles.duration;
			context.drawImage(
				image,
				this.position.x - size / 2,
				this.position.y - size / 2,
				size,
				size
			);
		};
		return Particle;
	})();

	/*
	 * ParticlePool class
	 */
	var ParticlePool = (function() {
		var particles,
			firstActive = 0,
			firstFree = 0,
			duration = settings.particles.duration;

		function ParticlePool(length) {
			// create and populate particle pool
			particles = new Array(length);
			for (var i = 0; i < particles.length; i++)
				particles[i] = new Particle();
		}
		ParticlePool.prototype.add = function(x, y, dx, dy) {
			particles[firstFree].initialize(x, y, dx, dy);

			// handle circular queue
			firstFree++;
			if (firstFree == particles.length) firstFree = 0;
			if (firstActive == firstFree) firstActive++;
			if (firstActive == particles.length) firstActive = 0;
		};
		ParticlePool.prototype.update = function(deltaTime) {
			var i;

			// update active particles
			if (firstActive < firstFree) {
				for (i = firstActive; i < firstFree; i++)
					particles[i].update(deltaTime);
			}
			if (firstFree < firstActive) {
				for (i = firstActive; i < particles.length; i++)
					particles[i].update(deltaTime);
				for (i = 0; i < firstFree; i++) particles[i].update(deltaTime);
			}

			// remove inactive particles
			while (
				particles[firstActive].age >= duration &&
				firstActive != firstFree
			) {
				firstActive++;
				if (firstActive == particles.length) firstActive = 0;
			}
		};
		ParticlePool.prototype.draw = function(context, image) {
			// draw active particles
			if (firstActive < firstFree) {
				for (i = firstActive; i < firstFree; i++)
					particles[i].draw(context, image);
			}
			if (firstFree < firstActive) {
				for (i = firstActive; i < particles.length; i++)
					particles[i].draw(context, image);
				for (i = 0; i < firstFree; i++) particles[i].draw(context, image);
			}
		};
		return ParticlePool;
	})();

	/*
	 * Putting it all together
	 */
	(function(canvas) {
		var context = canvas.getContext("2d"),
			particles = new ParticlePool(settings.particles.length),
			particleRate =
			settings.particles.length / settings.particles.duration, // particles/sec
			time;

		// get point on heart with -PI <= t <= PI
		function pointOnHeart(t) {
			return new Point(
				160 * Math.pow(Math.sin(t), 3),
				130 * Math.cos(t) -
				50 * Math.cos(2 * t) -
				20 * Math.cos(3 * t) -
				10 * Math.cos(4 * t) +
				25
			);
		}

		// creating the particle image using a dummy canvas
		var image = (function() {
			var canvas = document.createElement("canvas"),
				context = canvas.getContext("2d");
			canvas.width = settings.particles.size;
			canvas.height = settings.particles.size;
			// helper function to create the path
			function to(t) {
				var point = pointOnHeart(t);
				point.x =
					settings.particles.size / 2 +
					(point.x * settings.particles.size) / 350;
				point.y =
					settings.particles.size / 2 -
					(point.y * settings.particles.size) / 350;
				return point;
			}
			// create the path
			context.beginPath();
			var t = -Math.PI;
			var point = to(t);
			context.moveTo(point.x, point.y);
			while (t < Math.PI) {
				t += 0.01; // baby steps!
				point = to(t);
				context.lineTo(point.x, point.y);
			}
			context.closePath();
			// create the fill
			context.fillStyle = "#ea80b0";
			context.fill();
			// create the image
			var image = new Image();
			image.src = canvas.toDataURL();
			return image;
		})();

		// render that thing!
		function render() {
			// next animation frame
			requestAnimationFrame(render);

			// update time
			var newTime = new Date().getTime() / 1000,
				deltaTime = newTime - (time || newTime);
			time = newTime;

			// clear canvas
			context.clearRect(0, 0, canvas.width, canvas.height);

			// create new particles
			var amount = particleRate * deltaTime;
			for (var i = 0; i < amount; i++) {
				var pos = pointOnHeart(Math.PI - 2 * Math.PI * Math.random());
				var dir = pos.clone().length(settings.particles.velocity);
				particles.add(
					canvas.width / 2 + pos.x,
					canvas.height / 2 - pos.y,
					dir.x,
					-dir.y
				);
			}

			// update and draw particles
			particles.update(deltaTime);
			particles.draw(context, image);
		}

		// handle (re-)sizing of the canvas
		function onResize() {
			canvas.width = canvas.clientWidth;
			canvas.height = canvas.clientHeight;
		}
		window.onresize = onResize;

		// delay rendering bootstrap
		setTimeout(function() {
			onResize();
			render();
		}, 10);
	})(document.getElementById("pinkboard"));
</script>

<script>
	var RENDERER = {
		INIT_CHERRY_BLOSSOM_COUNT: 30,
		MAX_ADDING_INTERVAL: 10,

		init: function() {
			this.setParameters();
			this.reconstructMethods();
			this.createCherries();
			this.render();
			if (
				navigator.userAgent.match(
					/(phone|pod|iPhone|iPod|ios|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
				)
			) {
				// var box = document.querySelectorAll(".box")[0];
				// console.log(box, "移动端");
				// box.style.marginTop = "65%";
			}
		},
		setParameters: function() {
			this.$container = $("#jsi-cherry-container");
			this.width = this.$container.width();
			this.height = this.$container.height();
			this.context = $("<canvas />")
				.attr({
					width: this.width,
					height: this.height
				})
				.appendTo(this.$container)
				.get(0)
			var rate = this.FOCUS_POSITION / (this.z + this.FOCUS_POSITION),
				x = this.renderer.width / 2 + this.x * rate,
				y = this.renderer.height / 2 - this.y * rate;
			return {
				rate: rate,
				x: x,
				y: y
			};
		},
		re
	}
	}
	else {
		this.phi += Math.PI / (axis.y == this.thresholdY ? 200 : 500);
		this.phi %= Math.PI;
	}
	if (this.y <= -this.renderer.height * this.SURFACE_RATE) {
		this.x += 2;
		this.y = -this.renderer.height * this.SURFACE_RATE;
	} else {
		this.x += this.vx;
		this.y += this.vy;
	}
	return (
		this.z > -this.FOCUS_POSITION &&
		this.z < this.FAR_LIMIT &&
		this.x < this.renderer.width * 1.5
	);
	},
	};
	$(function() {
		RENDERER.init();
	});
</script>


原文作者:挽㫨

原文链接:https://blog.csdn.net/Su_mer/article/details/127154474

本站部分文章、数据、素材收集于网络,所有版权均归源网站或原作者所有!

如果侵犯了您的权益,请来信告知我们下线删除,邮箱:357234902@qq.com

标签:JavaScript