Hexo 动态背景(手机端关闭)

前言

为博客添加动态背景(为美化界面,优化网站,手机端自动关闭)

动态背景

新建/blog/themes/next/source/js/src/dynamic_background_PC.js文件,添加以下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
function o(w, v, i) {
return w.getAttribute(v) || i
}

function j(i) {
return document.getElementsByTagName(i)
}

function l() {
var i = j("script"),
w = i.length,
v = i[w - 1];
return {
l: w,
z: o(v, "zIndex", -1),
o: o(v, "opacity", 0.5),
c: o(v, "color", "0,0,0"),
n: o(v, "count", 99)
}
}

function k() {
r = u.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth, n = u
.height =
window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
}

function b() {
e.clearRect(0, 0, r, n);
var w = [f].concat(t);
var x, v, A, B, z, y;
t.forEach(function (i) {
i.x += i.xa, i.y += i.ya, i.xa *= i.x > r || i.x < 0 ? -1 : 1, i.ya *= i.y > n || i.y < 0 ? -1 : 1, e.fillRect(
i.x - 0.5, i.y - 0.5, 1, 1);
for (v = 0; v < w.length; v++) {
x = w[v];
if (i !== x && null !== x.x && null !== x.y) {
B = i.x - x.x, z = i.y - x.y, y = B * B + z * z;
y < x.max && (x === f && y >= x.max / 2 && (i.x -= 0.03 * B, i.y -= 0.03 * z), A = (x.max - y) /
x.max,
e.beginPath(), e.lineWidth = A / 2, e.strokeStyle = "rgba(" + s.c + "," + (A + 0.2) + ")",
e.moveTo(
i.x, i.y), e.lineTo(x.x, x.y), e.stroke())
}
}
w.splice(w.indexOf(i), 1)
}), m(b)
}
var u = document.createElement("canvas"),
s = l(),
c = "c_n" + s.l,
e = u.getContext("2d"),
r, n, m = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (i) {
window.setTimeout(i, 1000 / 45)
}, a = Math.random,
f = {
x: null,
y: null,
max: 20000
};
u.id = c;
u.style.cssText = "position:fixed;top:0;left:0;z-index:" + s.z + ";opacity:" + s.o;
j("body")[0].appendChild(u);
k(), window.onresize = k;
window.onmousemove = function (i) {
i = i || window.event, f.x = i.clientX, f.y = i.clientY
}, window.onmouseout = function () {
f.x = null, f.y = null
};
for (var t = [], p = 0; s.n > p; p++) {
var h = a() * r,
g = a() * n,
q = 2 * a() - 1,
d = 2 * a() - 1;
t.push({
x: h,
y: g,
xa: q,
ya: d,
max: 6000
})
}
setTimeout(function () {
b()
}, 100)

手机端自动关闭

判断UA值区分手机端与电脑端
/blog/themes/next/source/js/src/dynamic_background_PC.js文件,添加以下代码:

1
2
3
4
5
6
7
! function () {
//判断UA值区分手机端与电脑端
if (!((navigator.userAgent.match(
/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)))) {
//代码区
}
}();

将动态背景代码移入代码区即可

加载

打开themes\next\layout_layout.swig文件,在<body></body> 里面添加以下代码:

1
2
3
{% if theme.canvas_nest %}
<script type="text/javascript" color="0,0,255" opacity='0.6' zIndex="-2" count="120" src="/js/src/dynamic_background_PC.js"></script>
{% endif %}

大功告成,重新生成部署页面即可

参考:判断网页是通过PC端还是移动终端打开的
lewulu!
-------------The End-------------
0%