js实现直播点击飘心效果
作者：施主请别摸老衲的脸 发布时间：2024-02-24 18:29:22
标签：js,直播,飘心
本文实例为大家分享了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);
});
来源：https://blog.csdn.net/qq_36591333/article/details/79959687
0
投稿猜你喜欢
- 根据SalesOrderID排序，取第16-18行这3条记录。方法一：(最常用的分页代码， top / not in)SELECT &nbs
前言：线性回归模型属于经典的统计学模型，该模型的应用场景是根据已知的变量（即自变量）来预测某个连续的数值变量（即因变量）。例如餐厅根据媒体的- 目录1.celery异步消息队列介绍celery应用举例Celery有以下优点Celery 特性2.工作原理 *****Celery 扮演生
- 1、版本说明 ：python 2.7.10, Django (1.6.11.6),centos72、步骤说明：A、django 建立项目dj
- 1、问题：安装VSCode后打开，发现显示的语言为英文，想显示为中文？2、解决方法：2.1、快捷键CTRL+SHIFT+P，找到如下设置Co
- 前言最近学习了Fiddler抓包工具的简单使用，通过抓包，我们可以抓取到HTTP请求，并对其进行分析。现在我准备尝试着结合Python来模拟
- 300来行python代码实现简易版学生成绩管理系统，供大家参考，具体内容如下使用链表来实现class Node(object): def
- 前言，在pytorch中，当服务器上的gpu被占用时，很多时候我们想先用cpu调试下代码，那么就需要进行gpu和cpu的切换。方法1：x.t
- SQL Server 2005 远程连接配置TCP/IP属性.Surface Area Configuration –> Databa
- 今天在下脚本的时候遇到一个问题，比如有这样的一个字符串 t = "book123456",想把尾部的数字全部去掉，只留下
- 有时候，我们可能想在django中写一些代码来测试某些功能，我们希望在django项目中单独运行某个python文件来做这项测试工作。但是如
- 一：绑定方法：其特点是调用方本身自动作为第一个参数传入1.绑定到对象的方法：调用方是一个对象，该对象自动传入2.方法绑定到类：调用方是类，类
- strstr 定义和用法注释：该函数是二进制安全的。语法strstr(string,search,before_search)参数
- Python 读取WAV文件import waveimport structfrom scipy import *from pylab im
- 小毅的blog：http://andymao.com/前天网上有个朋友发给我一个页面让我帮她看一下为什么鼠标翻转实现不了。我打开源文件看了一
- 本文实例讲述了Django框架静态文件使用/中间件/禁用ip功能。分享给大家供大家参考，具体如下：静态文件一、静态文件的使用静态文件：网页中
- 本文实例为大家分享了python实现定时发送邮件的具体代码，供大家参考，具体内容如下一、发送邮件import smtplib from em
- 设置MySQL数据同步（单向&双向）由于公司的业务需求，需要网通和电信的数据同步，就做了个MySQL的双向同步，记下过程，以后用得到
- 手绘图片生成器可以将导入的彩 * 片通过python分析光源、灰度等操作生成手绘图片。UI界面的整体部分代码块，UI界面的设计比较简单。效果在
- Golang 是一门非常适合编写网络爬虫的语言，它有着高效的并发处理能力和丰富的网络编程库。下面是一个简单的 Golang 网络爬虫示例：p
