js实现直播点击飘心效果


Posted in Javascript onAugust 19, 2020

本文实例为大家分享了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);
 
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
超强的IE背景图片闪烁(抖动)的解决办法
Sep 09 Javascript
JSON 教程 json入门学习笔记
Sep 22 Javascript
利用JS重写Cognos右键菜单的实现代码
Apr 11 Javascript
javascript学习笔记(十八) 获得页面中的元素代码
Jun 20 Javascript
Javascript玩转继承(一)
May 08 Javascript
深入理解JavaScript系列(22):S.O.L.I.D五大原则之依赖倒置原则DIP详解
Mar 05 Javascript
JS实现字符串转日期并比较大小实例分析
Dec 09 Javascript
基于构造函数的五种继承方法小结
Jul 27 Javascript
详解为Bootstrap Modal添加拖拽的方法
Jan 05 Javascript
史上最为详细的javascript继承(推荐)
May 18 Javascript
Vue中实现回车键切换焦点的方法
Feb 19 Javascript
Vue-cli3多页面配置详解
Mar 22 Javascript
js实现鼠标点击飘爱心效果
Aug 19 #Javascript
Vue环境搭建+VSCode+Win10的详细教程
Aug 19 #Javascript
Vue实现导航栏菜单
Aug 19 #Javascript
vue实现tab栏点击高亮效果
Aug 19 #Javascript
封装Vue Element的table表格组件的示例详解
Aug 19 #Javascript
JS实现页面鼠标点击出现图片特效
Aug 19 #Javascript
Vue实现点击导航栏当前标签后变色功能
Aug 19 #Javascript
You might like
PHP 计算代码执行耗时的代码修正网上普遍错误
2011/05/14 PHP
PHP实现股票趋势图和柱形图
2015/02/07 PHP
Auntion-TableSort国人写的一个javascript表格排序的东西
2007/11/12 Javascript
input按钮的事件处理大全
2010/12/10 Javascript
firebug的一个有趣现象介绍
2011/11/30 Javascript
jQuery 开发者应该注意的9个错误
2012/05/03 Javascript
JavaScript对象创建及继承原理实例解剖
2013/02/28 Javascript
jQuery使用andSelf()来包含之前的选择集
2014/05/19 Javascript
详解JavaScript中void语句的使用
2015/06/04 Javascript
代码分析jQuery四种静态方法使用
2015/07/23 Javascript
js实现图片无缝滚动特效
2020/03/19 Javascript
详解JavaScript中的事件流和事件处理程序
2016/05/20 Javascript
Javascript获取随机数的实现方法
2016/06/22 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)
2017/01/21 Javascript
JavaScript实现的商品抢购倒计时功能示例
2017/04/17 Javascript
React中上传图片到七牛的示例代码
2017/10/10 Javascript
Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)
2018/02/08 Javascript
koa-router路由参数和前端路由的结合详解
2019/05/19 Javascript
[01:03:42]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
基于wxpython实现的windows GUI程序实例
2015/05/30 Python
Python实现的RSS阅读器实例
2015/07/25 Python
python正则表达式及使用正则表达式的例子
2018/01/22 Python
python将字典列表导出为Excel文件的方法
2019/09/02 Python
python中使用paramiko模块并实现远程连接服务器执行上传下载功能
2020/02/29 Python
完美解决pyinstaller打包报错找不到依赖pypiwin32或pywin32-ctypes的错误
2020/04/01 Python
解决pymysql cursor.fetchall() 获取不到数据的问题
2020/05/15 Python
Java的类与C++的类有什么不同
2014/01/18 面试题
回门宴答谢词
2014/01/13 职场文书
晨会主持词
2014/03/17 职场文书
公开承诺书格式
2014/05/21 职场文书
优秀毕业生就业推荐信
2014/05/22 职场文书
2015年社区重阳节活动总结
2015/07/30 职场文书
一篇文章带你深入了解Mysql触发器
2021/08/02 MySQL
一篇文章看懂MySQL主从复制与读写分离
2021/11/07 MySQL
Redis Lua脚本实现ip限流示例
2022/07/15 Redis