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 相关文章推荐
Javascript图像处理—为矩阵添加常用方法
Dec 27 Javascript
基于jquery实现的定时显示与隐藏div广告的实现代码
Aug 22 Javascript
javascript搜索框点击文字消失失焦时文本出现
Sep 18 Javascript
node.js中的fs.truncateSync方法使用说明
Dec 15 Javascript
Js和JQuery获取鼠标指针坐标的实现代码分享
May 25 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
Nov 17 Javascript
js动态添加的DIV中的onclick事件简单实例
Jul 25 Javascript
jQuery选择器之子元素选择器详解
Sep 18 jQuery
解决Vue2.0中使用less给元素添加背景图片出现的问题
Sep 03 Javascript
Angularjs实现数组随机排序的方法
Oct 02 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
Jan 23 Javascript
详解Vue中的自定义指令
Dec 07 Vue.js
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 IN_ARRAY 函数使用注意事项
2010/07/24 PHP
实例讲解PHP面向对象之多态
2014/08/20 PHP
jQuery弹出层插件简化版代码下载
2008/10/16 Javascript
javascript 解析后的xml对象的读取方法细解
2009/07/25 Javascript
js实现的切换面板实例代码
2013/06/17 Javascript
浅析用prototype定义自己的方法
2013/11/14 Javascript
Eclipse去除js(JavaScript)验证错误
2014/02/11 Javascript
基于dropdown.js实现的两款美观大气的二级导航菜单
2015/09/02 Javascript
Bootstrap每天必学之按钮(Button)插件
2016/04/25 Javascript
浅析jQuery中使用$所引发的问题
2016/05/29 Javascript
jquery 动态增加,减少input表单的简单方法(必看)
2016/10/12 Javascript
RequireJs的使用详解
2017/02/19 Javascript
微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】
2017/12/09 Javascript
Angular利用内容投射向组件输入ngForOf模板的方法
2018/03/05 Javascript
前端路由&amp;webpack基础配置详解
2019/06/10 Javascript
对layui中的onevent 和event的使用详解
2019/09/06 Javascript
vue实现数字滚动效果
2020/06/29 Javascript
JS制作简易计算器的实例代码
2020/07/04 Javascript
[00:37]2016完美“圣”典风云人物:rOtk宣传片
2016/12/09 DOTA
用Python中的__slots__缓存资源以节省内存开销的方法
2015/04/02 Python
python用户管理系统的实例讲解
2017/12/23 Python
python编程使用selenium模拟登陆淘宝实例代码
2018/01/25 Python
tensorflow 获取模型所有参数总和数量的方法
2018/06/14 Python
Python之列表的插入&amp;替换修改方法
2018/06/28 Python
python for循环输入一个矩阵的实例
2018/11/14 Python
基于Django的乐观锁与悲观锁解决订单并发问题详解
2019/07/31 Python
Python编程快速上手——Excel表格创建乘法表案例分析
2020/02/28 Python
python plt可视化——打印特殊符号和制作图例代码
2020/04/17 Python
Python检测端口IP字符串是否合法
2020/06/05 Python
浅析NumPy 切片和索引
2020/09/02 Python
使用sublime text3搭建Python编辑环境的实现
2021/01/12 Python
HTML5 canvas基本绘图之绘制阴影效果
2016/06/27 HTML / CSS
新闻记者实习自我鉴定
2013/09/19 职场文书
行政管理人员精品工作推荐信
2013/11/04 职场文书
自主实习接收函
2014/01/13 职场文书
宾馆前台接待岗位职责
2015/04/02 职场文书