原教程
起因：因为梦爱吃鱼大佬的代码没有对pjax进行处理，导致如果开启pjax会一直重复插入，所以我在他的基础上稍微改了一下，使代码在页面不会多次插入。
修改后
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
| function initFooterAnimal() {
const footerAnimal = document.getElementById('footer-animal');
if (footerAnimal) {
footerAnimal.remove();
}
const footerBar = document.querySelector('#footer-bar');
if (!footerBar) {
console.error('找不到指定元素');
return;
}
const newFooterAnimal = document.createElement('div');
newFooterAnimal.id = 'footer-animal';
newFooterAnimal.innerHTML = `
<img class="animal entered loaded"
src="https://i1.wp.com/ruom.wuaze.com/i/2024/10/19/473503.webp"
alt="动物" />
`;
footerBar.insertAdjacentElement('beforebegin', newFooterAnimal);
if (!document.getElementById('footer-animal-style')) {
const style = document.createElement('style');
style.id = 'footer-animal-style';
style.textContent = `
#footer-animal {
position: relative;
}
#footer-animal::before {
content: '';
position: absolute;
bottom: 0;
width: 100%;
height: 36px;
background: url(https://i1.wp.com/ruom.wuaze.com/i/2024/10/19/351933.webp) repeat center / auto 100%;
box-shadow: 0 4px 7px rgba(0,0,0,.15);
}
.animal {
position: relative;
max-width: min(974px, 100vw);
margin: 0 auto;
display: block;
}
#footer-bar {
margin-top: 0 !important;
}
@media screen and (max-width: 1023px) {
#footer-animal::before {
height: 4vw;
}
}
[data-theme=dark] #footer-animal {
filter: brightness(.8);
}
`;
document.head.appendChild(style);
}
}
document.addEventListener('DOMContentLoaded', initFooterAnimal);
document.addEventListener('pjax:complete', initFooterAnimal);
|
