点击元素出现漂浮表情包（源码）

最新推荐文章于 2022-10-31 14:32:12 发布

Amazon Translator

最新推荐文章于 2022-10-31 14:32:12 发布

阅读量2.2k

点赞数

分类专栏： Jquery HTML 文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_45140694/article/details/122047136

版权

Jquery 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

HTML

13 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <title>点击出现飘动表情包</title>
    <style type="text/css">
    
 
#emoji {
    display: block;
    position: relative;
    left: 47VW;
    margin-left: 314px;
    top: -782px;
    z-index: 20;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

        .journal-reward {
            position: absolute;
            bottom: 70px;
            right: 20px; 
            height: 60px;
            width: 60px;
            display: block;
            z-index: 21;
            cursor: pointer;
        }
    </style>
		<!-- 此元素设置了 class    class 绑定了js 点击事件 -->
    <img src="https://cdn.jsdelivr.net/www.jsdelivr.com/2ef72d6149828eb2f020168d52da027b0a94664b/img/logo-horizontal.svg" class="journal-reward" />
		
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
		
		
		<script type="text/javascript">
			! function(t, e) {
				"object" == typeof exports && "undefined" != typeof module ? module.exports = e() : "function" == typeof define && define.amd ? define(e) : t.BubbleHearts = e()
			}(this, function() {
				"use strict";
			 
				function t(t, n, r) {
					var i = e.uniformDiscrete(89, 91) / 100,
						o = 1 - i,
						u = (e.uniformDiscrete(45, 60) + e.uniformDiscrete(45, 60)) / 100,
						a = function(t) {
							return t > i ? Math.max(((1 - t) / o).toFixed(2), .1) * u : u
						},
						c = e.uniformDiscrete(-30, 30),
						f = function(t) {
							return c
						},
						h = 10,
						s = n.width / 2 + e.uniformDiscrete(-h, h),
						d = (n.width - Math.sqrt(Math.pow(t.width, 2) + Math.pow(t.height, 2))) / 2 - h,
						l = e.uniformDiscrete(.8 * d, d) * (e.uniformDiscrete(0, 1) ? 1 : -1),
						m = e.uniformDiscrete(250, 400),
						w = function(t) {
							return t > i ? s : s + l * Math.sin(m * (i - t) * Math.PI / 180)
						},
						v = function(e) {
							return t.height / 2 + (n.height - t.height / 2) * e
						},
						p = e.uniformDiscrete(14, 18) / 100,
						g = function(t) {
							return t > p ? 1 : 1 - ((p - t) / p).toFixed(2)
						};
					return function(e) {
						if(!(e >= 0)) return !0;
						r.save();
						var n = a(e),
							i = f(e),
							o = w(e),
							u = v(e);
						r.translate(o, u), r.scale(n, n), r.rotate(i * Math.PI / 180), r.globalAlpha = g(e), r.drawImage(t, -t.width / 2, -t.height / 2, t.width, t.height), r.restore()
					}
				}
				var e = function(t) {
						var e = t,
							n = Math.floor,
							r = Math.random;
						return t.uniform = function(t, e) {
							return t + (e - t) * r()
						}, t.uniformDiscrete = function(t, r) {
							return t + n((r - t + 1) * e.uniform(0, 1))
						}, t
					}({}),
					n = function(t, e) {
						if(!(t instanceof e)) throw new TypeError("Cannot call a class as a function")
					},
					r = function() {
						function t(t, e) {
							for(var n = 0; n < e.length; n++) {
								var r = e[n];
								r.enumerable = r.enumerable || !1, r.configurable = !0, "value" in r && (r.writable = !0), Object.defineProperty(t, r.key, r)
							}
						}
						return function(e, n, r) {
							return n && t(e.prototype, n), r && t(e, r), e
						}
					}(),
					i = window.requestAnimationFrame || window.webkitRequestAnimationFrame || function(t) {
						return setTimeout(t, 16)
					},
					o = function() {
						function o() {
							n(this, o);
							var t = this.canvas = document.createElement("canvas"),
								e = this.context = t.getContext("2d"),
								r = this._children = [],
								u = function n() {
									i(n), e.clearRect(0, 0, t.width, t.height);
									for(var o = 0, u = r.length; o < u;) {
										var a = r[o];
										a.render.call(null, (a.timestamp + a.duration - new Date) / a.duration) ? (r.splice(o, 1), u--) : o++
									}
								};
							i(u)
						}
						return r(o, [{
							key: "bubble",
							value: function(n) {
								var r = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : e.uniformDiscrete(2400, 3600),
									i = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : t(n, this.canvas, this.context);
								return this._children.push({
									render: i,
									duration: r,
									timestamp: +new Date
								}), this
							}
						}]), o
					}();
				return o
			});
			// 图片地址在此处更换  可换成你的图片
			var assets = [
				'https://img-blog.csdnimg.cn/c7e7b99a7a7143f88baa31a6533dd305.png'
			
				// 'img/2.png',
				// 'img/3.png',
				// 'img/4.png',
				// 'img/5.png',
			];
			assets.forEach(function(src, index) {
				assets[index] = new Promise(function(resolve) {
					var img = new Image;
					img.onload = resolve.bind(null, img);
					img.src = src;
				});
			});
			 
			Promise.all(assets).then(function(images) {
			 
				var random = {
					uniform: function(min, max) {
						return min + (max - min) * Math.random();
					},
					uniformDiscrete: function(i, j) {
						return i + Math.floor((j - i + 1) * random.uniform(0, 1));
					},
				};
			 
				var stage = new BubbleHearts();
				var canvas = stage.canvas;
				canvas.width = 170;
				canvas.height = 300;
				// 可设置宽高
				// canvas.style['width'] = '170px';
				// canvas.style['height'] = '300px';
				// 设置ID 方便前端操作
				// canvas.id = "emoji";
				document.body.appendChild(canvas);
				//journal-reward 为赏桃的按钮 
				document.getElementsByClassName('journal-reward')[0].addEventListener('click', function() {
					//随机飘动
					stage.bubble(images[random.uniformDiscrete(0, images.length - 1)]);
			 
				}, false);
			 
			});
		</script>

 
</html>