js实现直播点击飘心效果

时间：2021-05-26

本文实例为大家分享了js实现直播点击飘心效果的具体代码，供大家参考，具体内容如下

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>直播点击飘心效果</title> <style type="text/css">html, body { height: 100%; position: relative; width: 100%;}canvas { display: block; position: absolute; bottom: 100px; right: -24px; 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></head><body> <img src="img/reward.png" class="journal-reward" /> <script src="jquery.min.js"></script> <script src="flutter-hearts-zmt.js" type="text/javascript" charset="utf-8"></script></body></html>

flutter-hearts-zmt.js

! 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 = [ 'img/1.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'; document.body.appendChild(canvas); //journal-reward 为赏桃的按钮 document.getElementsByClassName('journal-reward')[0].addEventListener('click', function() { //随机飘动 stage.bubble(images[random.uniformDiscrete(0, images.length - 1)]); }, false); });

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章