js實現直播點選飄心效果
阿新 • • 發佈:2020-08-20
本文例項為大家分享了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); } .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,r) { return n && t(e.prototype,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,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); });
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。