luckyphoenix 1.0.1 → 1.0.3
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +4 -4
- package/aplayer/APlayer.min.css +2 -2
- package/aplayer/APlayer.min.js +1 -1
- package/aplayer/package.json +60 -60
- package/css/alist_skin_v2.css +410 -410
- package/css/alist_skin_v3.css +217 -242
- package/css/alist_wallpaper.css +48 -48
- package/css/colorful.css +65 -65
- package/css/font-awesome.css +10569 -10569
- package/css/harmonyos-sans-fonts.css +480 -0
- package/css/lxgw-style.css +6 -6
- package/css/lxgwwenkai-bold.css +873 -873
- package/css/lxgwwenkai-light.css +873 -873
- package/css/lxgwwenkai-regular.css +873 -873
- package/css/lxgwwenkaimono-bold.css +873 -873
- package/css/lxgwwenkaimono-light.css +873 -873
- package/css/lxgwwenkaimono-regular.css +873 -873
- package/img/logo/alist.svg +9 -9
- package/img/logo/github.svg +3 -3
- package/js/Meting.min.js +1 -1
- package/js/alist_skin.js +51 -51
- package/js/anime.min.js +32 -32
- package/js/canvas.js +23 -23
- package/js/clock.js +116 -116
- package/js/everyday_poem.js +11 -11
- package/js/fireworks.js +124 -124
- package/js/granim.min.js +1 -1
- package/js/jquery-3.6.0.min.js +2 -2
- package/js/newyear.js +65 -65
- package/js/onclick_colorful_words.js +37 -37
- package/js/onclick_love.js +50 -50
- package/js/onlick_burst.js +134 -134
- package/js/ribbons.js +334 -334
- package/js/sakura_drops.js +167 -167
- package/js/yaml/js-yaml.js +3874 -3874
- package/js/yaml/js-yaml.min.js +2 -2
- package/js/yaml/js-yaml.mjs +3850 -3850
- package/package.json +33 -33
- package/webfonts/lxgw-wenkai-webfont/package.json +33 -33
package/js/newyear.js
CHANGED
@@ -1,66 +1,66 @@
|
|
1
|
-
// 新年倒计时
|
2
|
-
{/* <div class="gn_box">
|
3
|
-
<h2>
|
4
|
-
<font color="#E80017">2</font>
|
5
|
-
<font color="#D1002E">0</font>
|
6
|
-
<font color="#BA0045">2</font>
|
7
|
-
<font color="#A3005C">3</font>
|
8
|
-
<font color="#8C0073">年</font>
|
9
|
-
<font color="#E80088"><</font>
|
10
|
-
<font color="#4a0080">元</font>
|
11
|
-
<font color="#470099">宵</font>
|
12
|
-
<font color="#3e00b3">节</font>
|
13
|
-
<font color="#3000cc">倒</font>
|
14
|
-
<font color="#1b00e6">计</font>
|
15
|
-
<font color="#0000ff">时></font>
|
16
|
-
</h2>
|
17
|
-
<center>
|
18
|
-
<div id="CountMsg" class="HotDate">
|
19
|
-
<h2>
|
20
|
-
<font face="楷体_GB2312" color="#b2da11" size="4.8">
|
21
|
-
<span id="t_d">36 天</span>
|
22
|
-
<span id="t_h">05 时</span>
|
23
|
-
<span id="t_m">46 分</span>
|
24
|
-
<span id="t_s">53 秒</span>
|
25
|
-
</font>
|
26
|
-
</h2>
|
27
|
-
</div>
|
28
|
-
</center>
|
29
|
-
<font face="楷体_GB2312" color="#b2da11" size="4.8">
|
30
|
-
<script type="text/javascript"> */}
|
31
|
-
function getRTime() {
|
32
|
-
var NowTime = new Date()
|
33
|
-
var EndTime = new Date(parseInt(NowTime.getFullYear()) + '-02-05 00:00:00')
|
34
|
-
var lefttime = parseInt((EndTime.getTime() - NowTime.getTime()) / 1000)
|
35
|
-
var d = parseInt(lefttime / (24 * 60 * 60))
|
36
|
-
var h = parseInt(lefttime / (60 * 60) % 24)
|
37
|
-
var m = parseInt(lefttime / 60 % 60)
|
38
|
-
var s = parseInt(lefttime % 60)
|
39
|
-
d = addZero(d)
|
40
|
-
h = addZero(h)
|
41
|
-
m = addZero(m)
|
42
|
-
s = addZero(s)
|
43
|
-
var day = document.getElementById("t_d")
|
44
|
-
if (day != null) {
|
45
|
-
day.innerHTML = d + " 天"
|
46
|
-
}
|
47
|
-
var hour = document.getElementById("t_h")
|
48
|
-
if (hour != null) {
|
49
|
-
hour.innerHTML = h + " 时"
|
50
|
-
}
|
51
|
-
var min = document.getElementById("t_m")
|
52
|
-
if (min != null) {
|
53
|
-
min.innerHTML = m + " 分"
|
54
|
-
}
|
55
|
-
var sec = document.getElementById("t_s")
|
56
|
-
if (sec != null) {
|
57
|
-
sec.innerHTML = s + " 秒"
|
58
|
-
}
|
59
|
-
}
|
60
|
-
function addZero(i) {
|
61
|
-
return i < 10 ? "0" + i : i + ""
|
62
|
-
}
|
63
|
-
// setInterval(getRTime, 1000)
|
64
|
-
// </script>
|
65
|
-
// </font>
|
1
|
+
// 新年倒计时
|
2
|
+
{/* <div class="gn_box">
|
3
|
+
<h2>
|
4
|
+
<font color="#E80017">2</font>
|
5
|
+
<font color="#D1002E">0</font>
|
6
|
+
<font color="#BA0045">2</font>
|
7
|
+
<font color="#A3005C">3</font>
|
8
|
+
<font color="#8C0073">年</font>
|
9
|
+
<font color="#E80088"><</font>
|
10
|
+
<font color="#4a0080">元</font>
|
11
|
+
<font color="#470099">宵</font>
|
12
|
+
<font color="#3e00b3">节</font>
|
13
|
+
<font color="#3000cc">倒</font>
|
14
|
+
<font color="#1b00e6">计</font>
|
15
|
+
<font color="#0000ff">时></font>
|
16
|
+
</h2>
|
17
|
+
<center>
|
18
|
+
<div id="CountMsg" class="HotDate">
|
19
|
+
<h2>
|
20
|
+
<font face="楷体_GB2312" color="#b2da11" size="4.8">
|
21
|
+
<span id="t_d">36 天</span>
|
22
|
+
<span id="t_h">05 时</span>
|
23
|
+
<span id="t_m">46 分</span>
|
24
|
+
<span id="t_s">53 秒</span>
|
25
|
+
</font>
|
26
|
+
</h2>
|
27
|
+
</div>
|
28
|
+
</center>
|
29
|
+
<font face="楷体_GB2312" color="#b2da11" size="4.8">
|
30
|
+
<script type="text/javascript"> */}
|
31
|
+
function getRTime() {
|
32
|
+
var NowTime = new Date()
|
33
|
+
var EndTime = new Date(parseInt(NowTime.getFullYear()) + '-02-05 00:00:00')
|
34
|
+
var lefttime = parseInt((EndTime.getTime() - NowTime.getTime()) / 1000)
|
35
|
+
var d = parseInt(lefttime / (24 * 60 * 60))
|
36
|
+
var h = parseInt(lefttime / (60 * 60) % 24)
|
37
|
+
var m = parseInt(lefttime / 60 % 60)
|
38
|
+
var s = parseInt(lefttime % 60)
|
39
|
+
d = addZero(d)
|
40
|
+
h = addZero(h)
|
41
|
+
m = addZero(m)
|
42
|
+
s = addZero(s)
|
43
|
+
var day = document.getElementById("t_d")
|
44
|
+
if (day != null) {
|
45
|
+
day.innerHTML = d + " 天"
|
46
|
+
}
|
47
|
+
var hour = document.getElementById("t_h")
|
48
|
+
if (hour != null) {
|
49
|
+
hour.innerHTML = h + " 时"
|
50
|
+
}
|
51
|
+
var min = document.getElementById("t_m")
|
52
|
+
if (min != null) {
|
53
|
+
min.innerHTML = m + " 分"
|
54
|
+
}
|
55
|
+
var sec = document.getElementById("t_s")
|
56
|
+
if (sec != null) {
|
57
|
+
sec.innerHTML = s + " 秒"
|
58
|
+
}
|
59
|
+
}
|
60
|
+
function addZero(i) {
|
61
|
+
return i < 10 ? "0" + i : i + ""
|
62
|
+
}
|
63
|
+
// setInterval(getRTime, 1000)
|
64
|
+
// </script>
|
65
|
+
// </font>
|
66
66
|
// </div>
|
@@ -1,38 +1,38 @@
|
|
1
|
-
/* 鼠标点击特效(炫彩字) */
|
2
|
-
(function () {
|
3
|
-
var a_idx = 0;
|
4
|
-
window.onclick = function (event) {
|
5
|
-
var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善");
|
6
|
-
|
7
|
-
var heart = document.createElement("b"); //创建b元素
|
8
|
-
heart.onselectstart = new Function('event.returnValue=false'); //防止拖动
|
9
|
-
document.body.appendChild(heart).innerHTML = a[a_idx]; //将b元素添加到页面上
|
10
|
-
a_idx = (a_idx + 1) % a.length;
|
11
|
-
heart.style.cssText = "position: fixed;left:-100%;"; //给p元素设置样式
|
12
|
-
var f = 10, // 字体大小
|
13
|
-
|
14
|
-
x = event.clientX - f / 2, // 横坐标
|
15
|
-
y = event.clientY - f, // 纵坐标
|
16
|
-
c = randomColor(), // 随机颜色
|
17
|
-
a = 1, // 透明度
|
18
|
-
s = 1.2; // 放大缩小
|
19
|
-
|
20
|
-
var timer = setInterval(function () { //添加定时器
|
21
|
-
if (a <= 0) {
|
22
|
-
document.body.removeChild(heart);
|
23
|
-
clearInterval(timer);
|
24
|
-
} else {
|
25
|
-
heart.style.cssText = "font-size:16px;cursor: default;position: fixed;color:" + c + ";left:" + x + "px;top:" + y + "px;opacity:" + a + ";transform:scale(" + s + ");";
|
26
|
-
y--;
|
27
|
-
a -= 0.016;
|
28
|
-
s += 0.002;
|
29
|
-
}
|
30
|
-
}, 15)
|
31
|
-
|
32
|
-
}
|
33
|
-
// 随机颜色
|
34
|
-
function randomColor() {
|
35
|
-
return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + ")";
|
36
|
-
}
|
37
|
-
}()
|
1
|
+
/* 鼠标点击特效(炫彩字) */
|
2
|
+
(function () {
|
3
|
+
var a_idx = 0;
|
4
|
+
window.onclick = function (event) {
|
5
|
+
var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善");
|
6
|
+
|
7
|
+
var heart = document.createElement("b"); //创建b元素
|
8
|
+
heart.onselectstart = new Function('event.returnValue=false'); //防止拖动
|
9
|
+
document.body.appendChild(heart).innerHTML = a[a_idx]; //将b元素添加到页面上
|
10
|
+
a_idx = (a_idx + 1) % a.length;
|
11
|
+
heart.style.cssText = "position: fixed;left:-100%;"; //给p元素设置样式
|
12
|
+
var f = 10, // 字体大小
|
13
|
+
|
14
|
+
x = event.clientX - f / 2, // 横坐标
|
15
|
+
y = event.clientY - f, // 纵坐标
|
16
|
+
c = randomColor(), // 随机颜色
|
17
|
+
a = 1, // 透明度
|
18
|
+
s = 1.2; // 放大缩小
|
19
|
+
|
20
|
+
var timer = setInterval(function () { //添加定时器
|
21
|
+
if (a <= 0) {
|
22
|
+
document.body.removeChild(heart);
|
23
|
+
clearInterval(timer);
|
24
|
+
} else {
|
25
|
+
heart.style.cssText = "font-size:16px;cursor: default;position: fixed;color:" + c + ";left:" + x + "px;top:" + y + "px;opacity:" + a + ";transform:scale(" + s + ");";
|
26
|
+
y--;
|
27
|
+
a -= 0.016;
|
28
|
+
s += 0.002;
|
29
|
+
}
|
30
|
+
}, 15)
|
31
|
+
|
32
|
+
}
|
33
|
+
// 随机颜色
|
34
|
+
function randomColor() {
|
35
|
+
return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + ")";
|
36
|
+
}
|
37
|
+
}()
|
38
38
|
);
|
package/js/onclick_love.js
CHANGED
@@ -1,51 +1,51 @@
|
|
1
|
-
/* 网页鼠标点击特效(爱心)*/
|
2
|
-
! function (e, t, a) {
|
3
|
-
function r() {
|
4
|
-
for (var e = 0; e < s.length; e++) s[e].alpha <= 0 ? (t.body.removeChild(s[e].el), s.splice(e, 1)) : (s[
|
5
|
-
e].y--, s[e].scale += .004, s[e].alpha -= .013, s[e].el.style.cssText = "left:" + s[e].x +
|
6
|
-
"px;top:" + s[e].y + "px;opacity:" + s[e].alpha + ";transform:scale(" + s[e].scale + "," + s[e]
|
7
|
-
.scale + ") rotate(45deg);background:" + s[e].color + ";z-index:99999");
|
8
|
-
requestAnimationFrame(r)
|
9
|
-
}
|
10
|
-
function n() {
|
11
|
-
var t = "function" == typeof e.onclick && e.onclick;
|
12
|
-
e.onclick = function (e) {
|
13
|
-
t && t(), o(e)
|
14
|
-
}
|
15
|
-
}
|
16
|
-
|
17
|
-
function o(e) {
|
18
|
-
var a = t.createElement("div");
|
19
|
-
a.className = "heart", s.push({
|
20
|
-
el: a,
|
21
|
-
x: e.clientX - 5,
|
22
|
-
y: e.clientY - 5,
|
23
|
-
scale: 1,
|
24
|
-
alpha: 1,
|
25
|
-
color: c()
|
26
|
-
}), t.body.appendChild(a)
|
27
|
-
}
|
28
|
-
|
29
|
-
function i(e) {
|
30
|
-
var a = t.createElement("style");
|
31
|
-
a.type = "text/css";
|
32
|
-
try {
|
33
|
-
a.appendChild(t.createTextNode(e))
|
34
|
-
} catch (t) {
|
35
|
-
a.styleSheet.cssText = e
|
36
|
-
}
|
37
|
-
t.getElementsByTagName("head")[0].appendChild(a)
|
38
|
-
}
|
39
|
-
|
40
|
-
function c() {
|
41
|
-
return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math
|
42
|
-
.random()) + ")"
|
43
|
-
}
|
44
|
-
var s = [];
|
45
|
-
e.requestAnimationFrame = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e
|
46
|
-
.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) {
|
47
|
-
setTimeout(e, 1e3 / 60)
|
48
|
-
}, i(
|
49
|
-
".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"
|
50
|
-
), n(), r()
|
1
|
+
/* 网页鼠标点击特效(爱心)*/
|
2
|
+
! function (e, t, a) {
|
3
|
+
function r() {
|
4
|
+
for (var e = 0; e < s.length; e++) s[e].alpha <= 0 ? (t.body.removeChild(s[e].el), s.splice(e, 1)) : (s[
|
5
|
+
e].y--, s[e].scale += .004, s[e].alpha -= .013, s[e].el.style.cssText = "left:" + s[e].x +
|
6
|
+
"px;top:" + s[e].y + "px;opacity:" + s[e].alpha + ";transform:scale(" + s[e].scale + "," + s[e]
|
7
|
+
.scale + ") rotate(45deg);background:" + s[e].color + ";z-index:99999");
|
8
|
+
requestAnimationFrame(r)
|
9
|
+
}
|
10
|
+
function n() {
|
11
|
+
var t = "function" == typeof e.onclick && e.onclick;
|
12
|
+
e.onclick = function (e) {
|
13
|
+
t && t(), o(e)
|
14
|
+
}
|
15
|
+
}
|
16
|
+
|
17
|
+
function o(e) {
|
18
|
+
var a = t.createElement("div");
|
19
|
+
a.className = "heart", s.push({
|
20
|
+
el: a,
|
21
|
+
x: e.clientX - 5,
|
22
|
+
y: e.clientY - 5,
|
23
|
+
scale: 1,
|
24
|
+
alpha: 1,
|
25
|
+
color: c()
|
26
|
+
}), t.body.appendChild(a)
|
27
|
+
}
|
28
|
+
|
29
|
+
function i(e) {
|
30
|
+
var a = t.createElement("style");
|
31
|
+
a.type = "text/css";
|
32
|
+
try {
|
33
|
+
a.appendChild(t.createTextNode(e))
|
34
|
+
} catch (t) {
|
35
|
+
a.styleSheet.cssText = e
|
36
|
+
}
|
37
|
+
t.getElementsByTagName("head")[0].appendChild(a)
|
38
|
+
}
|
39
|
+
|
40
|
+
function c() {
|
41
|
+
return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math
|
42
|
+
.random()) + ")"
|
43
|
+
}
|
44
|
+
var s = [];
|
45
|
+
e.requestAnimationFrame = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e
|
46
|
+
.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) {
|
47
|
+
setTimeout(e, 1e3 / 60)
|
48
|
+
}, i(
|
49
|
+
".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"
|
50
|
+
), n(), r()
|
51
51
|
}(window, document);
|
package/js/onlick_burst.js
CHANGED
@@ -1,135 +1,135 @@
|
|
1
|
-
/* 鼠标点击特效(爆炸) */
|
2
|
-
function clickEffect() {
|
3
|
-
let balls = [];
|
4
|
-
let longPressed = false;
|
5
|
-
let longPress;
|
6
|
-
let multiplier = 0;
|
7
|
-
let width, height;
|
8
|
-
let origin;
|
9
|
-
let normal;
|
10
|
-
let ctx;
|
11
|
-
const colours = ["#F73859", "#14FFEC", "#00E0FF", "#FF99FE", "#FAF15D"];
|
12
|
-
const canvas = document.createElement("canvas");
|
13
|
-
document.body.appendChild(canvas);
|
14
|
-
canvas.setAttribute("style", "width: 100%; height: 100%; top: 0; left: 0; z-index: 99999; position: fixed; pointer-events: none;");
|
15
|
-
const pointer = document.createElement("span");
|
16
|
-
pointer.classList.add("pointer");
|
17
|
-
document.body.appendChild(pointer);
|
18
|
-
|
19
|
-
if (canvas.getContext && window.addEventListener) {
|
20
|
-
ctx = canvas.getContext("2d");
|
21
|
-
updateSize();
|
22
|
-
window.addEventListener('resize', updateSize, false);
|
23
|
-
loop();
|
24
|
-
window.addEventListener("mousedown", function (e) {
|
25
|
-
pushBalls(randBetween(10, 20), e.clientX, e.clientY);
|
26
|
-
document.body.classList.add("is-pressed");
|
27
|
-
longPress = setTimeout(function () {
|
28
|
-
document.body.classList.add("is-longpress");
|
29
|
-
longPressed = true;
|
30
|
-
}, 500);
|
31
|
-
}, false);
|
32
|
-
window.addEventListener("mouseup", function (e) {
|
33
|
-
clearInterval(longPress);
|
34
|
-
if (longPressed == true) {
|
35
|
-
document.body.classList.remove("is-longpress");
|
36
|
-
pushBalls(randBetween(50 + Math.ceil(multiplier), 100 + Math.ceil(multiplier)), e.clientX, e.clientY);
|
37
|
-
longPressed = false;
|
38
|
-
}
|
39
|
-
document.body.classList.remove("is-pressed");
|
40
|
-
}, false);
|
41
|
-
window.addEventListener("mousemove", function (e) {
|
42
|
-
let x = e.clientX;
|
43
|
-
let y = e.clientY;
|
44
|
-
pointer.style.top = y + "px";
|
45
|
-
pointer.style.left = x + "px";
|
46
|
-
}, false);
|
47
|
-
} else {
|
48
|
-
console.log("canvas or addEventListener is unsupported!");
|
49
|
-
}
|
50
|
-
|
51
|
-
|
52
|
-
function updateSize() {
|
53
|
-
canvas.width = window.innerWidth * 2;
|
54
|
-
canvas.height = window.innerHeight * 2;
|
55
|
-
canvas.style.width = window.innerWidth + 'px';
|
56
|
-
canvas.style.height = window.innerHeight + 'px';
|
57
|
-
ctx.scale(2, 2);
|
58
|
-
width = (canvas.width = window.innerWidth);
|
59
|
-
height = (canvas.height = window.innerHeight);
|
60
|
-
origin = {
|
61
|
-
x: width / 2,
|
62
|
-
y: height / 2
|
63
|
-
};
|
64
|
-
normal = {
|
65
|
-
x: width / 2,
|
66
|
-
y: height / 2
|
67
|
-
};
|
68
|
-
}
|
69
|
-
class Ball {
|
70
|
-
constructor(x = origin.x, y = origin.y) {
|
71
|
-
this.x = x;
|
72
|
-
this.y = y;
|
73
|
-
this.angle = Math.PI * 2 * Math.random();
|
74
|
-
if (longPressed == true) {
|
75
|
-
this.multiplier = randBetween(14 + multiplier, 15 + multiplier);
|
76
|
-
} else {
|
77
|
-
this.multiplier = randBetween(6, 12);
|
78
|
-
}
|
79
|
-
this.vx = (this.multiplier + Math.random() * 0.5) * Math.cos(this.angle);
|
80
|
-
this.vy = (this.multiplier + Math.random() * 0.5) * Math.sin(this.angle);
|
81
|
-
this.r = randBetween(8, 12) + 3 * Math.random();
|
82
|
-
this.color = colours[Math.floor(Math.random() * colours.length)];
|
83
|
-
}
|
84
|
-
update() {
|
85
|
-
this.x += this.vx - normal.x;
|
86
|
-
this.y += this.vy - normal.y;
|
87
|
-
normal.x = -2 / window.innerWidth * Math.sin(this.angle);
|
88
|
-
normal.y = -2 / window.innerHeight * Math.cos(this.angle);
|
89
|
-
this.r -= 0.3;
|
90
|
-
this.vx *= 0.9;
|
91
|
-
this.vy *= 0.9;
|
92
|
-
}
|
93
|
-
}
|
94
|
-
|
95
|
-
function pushBalls(count = 1, x = origin.x, y = origin.y) {
|
96
|
-
for (let i = 0; i < count; i++) {
|
97
|
-
balls.push(new Ball(x, y));
|
98
|
-
}
|
99
|
-
}
|
100
|
-
|
101
|
-
function randBetween(min, max) {
|
102
|
-
return Math.floor(Math.random() * max) + min;
|
103
|
-
}
|
104
|
-
|
105
|
-
function loop() {
|
106
|
-
ctx.fillStyle = "rgba(255, 255, 255, 0)";
|
107
|
-
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
108
|
-
for (let i = 0; i < balls.length; i++) {
|
109
|
-
let b = balls[i];
|
110
|
-
if (b.r < 0) continue;
|
111
|
-
ctx.fillStyle = b.color;
|
112
|
-
ctx.beginPath();
|
113
|
-
ctx.arc(b.x, b.y, b.r, 0, Math.PI * 2, false);
|
114
|
-
ctx.fill();
|
115
|
-
b.update();
|
116
|
-
}
|
117
|
-
if (longPressed == true) {
|
118
|
-
multiplier += 0.2;
|
119
|
-
} else if (!longPressed && multiplier >= 0) {
|
120
|
-
multiplier -= 0.4;
|
121
|
-
}
|
122
|
-
removeBall();
|
123
|
-
requestAnimationFrame(loop);
|
124
|
-
}
|
125
|
-
|
126
|
-
function removeBall() {
|
127
|
-
for (let i = 0; i < balls.length; i++) {
|
128
|
-
let b = balls[i];
|
129
|
-
if (b.x + b.r < 0 || b.x - b.r > width || b.y + b.r < 0 || b.y - b.r > height || b.r < 0) {
|
130
|
-
balls.splice(i, 1);
|
131
|
-
}
|
132
|
-
}
|
133
|
-
}
|
134
|
-
}
|
1
|
+
/* 鼠标点击特效(爆炸) */
|
2
|
+
function clickEffect() {
|
3
|
+
let balls = [];
|
4
|
+
let longPressed = false;
|
5
|
+
let longPress;
|
6
|
+
let multiplier = 0;
|
7
|
+
let width, height;
|
8
|
+
let origin;
|
9
|
+
let normal;
|
10
|
+
let ctx;
|
11
|
+
const colours = ["#F73859", "#14FFEC", "#00E0FF", "#FF99FE", "#FAF15D"];
|
12
|
+
const canvas = document.createElement("canvas");
|
13
|
+
document.body.appendChild(canvas);
|
14
|
+
canvas.setAttribute("style", "width: 100%; height: 100%; top: 0; left: 0; z-index: 99999; position: fixed; pointer-events: none;");
|
15
|
+
const pointer = document.createElement("span");
|
16
|
+
pointer.classList.add("pointer");
|
17
|
+
document.body.appendChild(pointer);
|
18
|
+
|
19
|
+
if (canvas.getContext && window.addEventListener) {
|
20
|
+
ctx = canvas.getContext("2d");
|
21
|
+
updateSize();
|
22
|
+
window.addEventListener('resize', updateSize, false);
|
23
|
+
loop();
|
24
|
+
window.addEventListener("mousedown", function (e) {
|
25
|
+
pushBalls(randBetween(10, 20), e.clientX, e.clientY);
|
26
|
+
document.body.classList.add("is-pressed");
|
27
|
+
longPress = setTimeout(function () {
|
28
|
+
document.body.classList.add("is-longpress");
|
29
|
+
longPressed = true;
|
30
|
+
}, 500);
|
31
|
+
}, false);
|
32
|
+
window.addEventListener("mouseup", function (e) {
|
33
|
+
clearInterval(longPress);
|
34
|
+
if (longPressed == true) {
|
35
|
+
document.body.classList.remove("is-longpress");
|
36
|
+
pushBalls(randBetween(50 + Math.ceil(multiplier), 100 + Math.ceil(multiplier)), e.clientX, e.clientY);
|
37
|
+
longPressed = false;
|
38
|
+
}
|
39
|
+
document.body.classList.remove("is-pressed");
|
40
|
+
}, false);
|
41
|
+
window.addEventListener("mousemove", function (e) {
|
42
|
+
let x = e.clientX;
|
43
|
+
let y = e.clientY;
|
44
|
+
pointer.style.top = y + "px";
|
45
|
+
pointer.style.left = x + "px";
|
46
|
+
}, false);
|
47
|
+
} else {
|
48
|
+
console.log("canvas or addEventListener is unsupported!");
|
49
|
+
}
|
50
|
+
|
51
|
+
|
52
|
+
function updateSize() {
|
53
|
+
canvas.width = window.innerWidth * 2;
|
54
|
+
canvas.height = window.innerHeight * 2;
|
55
|
+
canvas.style.width = window.innerWidth + 'px';
|
56
|
+
canvas.style.height = window.innerHeight + 'px';
|
57
|
+
ctx.scale(2, 2);
|
58
|
+
width = (canvas.width = window.innerWidth);
|
59
|
+
height = (canvas.height = window.innerHeight);
|
60
|
+
origin = {
|
61
|
+
x: width / 2,
|
62
|
+
y: height / 2
|
63
|
+
};
|
64
|
+
normal = {
|
65
|
+
x: width / 2,
|
66
|
+
y: height / 2
|
67
|
+
};
|
68
|
+
}
|
69
|
+
class Ball {
|
70
|
+
constructor(x = origin.x, y = origin.y) {
|
71
|
+
this.x = x;
|
72
|
+
this.y = y;
|
73
|
+
this.angle = Math.PI * 2 * Math.random();
|
74
|
+
if (longPressed == true) {
|
75
|
+
this.multiplier = randBetween(14 + multiplier, 15 + multiplier);
|
76
|
+
} else {
|
77
|
+
this.multiplier = randBetween(6, 12);
|
78
|
+
}
|
79
|
+
this.vx = (this.multiplier + Math.random() * 0.5) * Math.cos(this.angle);
|
80
|
+
this.vy = (this.multiplier + Math.random() * 0.5) * Math.sin(this.angle);
|
81
|
+
this.r = randBetween(8, 12) + 3 * Math.random();
|
82
|
+
this.color = colours[Math.floor(Math.random() * colours.length)];
|
83
|
+
}
|
84
|
+
update() {
|
85
|
+
this.x += this.vx - normal.x;
|
86
|
+
this.y += this.vy - normal.y;
|
87
|
+
normal.x = -2 / window.innerWidth * Math.sin(this.angle);
|
88
|
+
normal.y = -2 / window.innerHeight * Math.cos(this.angle);
|
89
|
+
this.r -= 0.3;
|
90
|
+
this.vx *= 0.9;
|
91
|
+
this.vy *= 0.9;
|
92
|
+
}
|
93
|
+
}
|
94
|
+
|
95
|
+
function pushBalls(count = 1, x = origin.x, y = origin.y) {
|
96
|
+
for (let i = 0; i < count; i++) {
|
97
|
+
balls.push(new Ball(x, y));
|
98
|
+
}
|
99
|
+
}
|
100
|
+
|
101
|
+
function randBetween(min, max) {
|
102
|
+
return Math.floor(Math.random() * max) + min;
|
103
|
+
}
|
104
|
+
|
105
|
+
function loop() {
|
106
|
+
ctx.fillStyle = "rgba(255, 255, 255, 0)";
|
107
|
+
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
108
|
+
for (let i = 0; i < balls.length; i++) {
|
109
|
+
let b = balls[i];
|
110
|
+
if (b.r < 0) continue;
|
111
|
+
ctx.fillStyle = b.color;
|
112
|
+
ctx.beginPath();
|
113
|
+
ctx.arc(b.x, b.y, b.r, 0, Math.PI * 2, false);
|
114
|
+
ctx.fill();
|
115
|
+
b.update();
|
116
|
+
}
|
117
|
+
if (longPressed == true) {
|
118
|
+
multiplier += 0.2;
|
119
|
+
} else if (!longPressed && multiplier >= 0) {
|
120
|
+
multiplier -= 0.4;
|
121
|
+
}
|
122
|
+
removeBall();
|
123
|
+
requestAnimationFrame(loop);
|
124
|
+
}
|
125
|
+
|
126
|
+
function removeBall() {
|
127
|
+
for (let i = 0; i < balls.length; i++) {
|
128
|
+
let b = balls[i];
|
129
|
+
if (b.x + b.r < 0 || b.x - b.r > width || b.y + b.r < 0 || b.y - b.r > height || b.r < 0) {
|
130
|
+
balls.splice(i, 1);
|
131
|
+
}
|
132
|
+
}
|
133
|
+
}
|
134
|
+
}
|
135
135
|
clickEffect();//调用特效函数
|