更新

2023-02-16更新:解决失效问题,只需要将path[0]换成target即可

由DOMNodeInserted换成Observer,并简化部分代码。

感谢 @Heo 提供的动画效果,已添加。

支持已评论内容中的图片放大,例如表情,图片,头像等等(可选)只需要在js中取消对应注释即可

增加边缘检测,防止手机端放大后超出屏幕边缘

修复回复窗口无法放大的BUG

盒子宽高根据图片比例设置,不再是固定的宽高。(不会出现显示不全或者显示多余的情况)

新增倍数参数,只需要根据需求修改需要放大的倍数即可,灰常滴方便。

增加夜间模式背景色适配。

前言

本教程适用twikoo,其他评论系统自行移植,原理都一样,改改就可以。

最近给评论区加了一些表情包,而有的表情包是带文字的。
在评论时这些表情包因为太小会导致看不清具体内容。
这就很影响使用了,你不知道它是什么意思的话怎么会去使用这个表情包。
于是我就写了这个表情放大的功能。

效果图

当然,你也可以直接在下面评论区体验

教程

其实实现的原理很简单,就是创建一个盒子,将表情包的内容放在盒子里面,然后控制盒子位置和显示隐藏即可。
但是这么简单的东西还是花了我几个小时的时间。所以说真的很应该感谢那些写出好用的东西来方便大家的人。

开始前还是老生常谈的问题——如果你不会自定义js和css文件的话,看我这篇文章:Hexo博客添加自定义css和js文件

js

直接全选粘贴在自定义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
// 如果当前页有评论就执行函数
if (document.getElementById('post-comment')) owoBig();
// 表情放大
function owoBig() {
let flag = 1, // 设置节流阀
owo_time = '', // 设置计时器
m = 3; // 设置放大倍数
// 创建盒子
let div = document.createElement('div'),
body = document.querySelector('body');
// 设置ID
div.id = 'owo-big';
// 插入盒子
body.appendChild(div)

// 构造observer
let observer = new MutationObserver(mutations => {

for (let i = 0; i < mutations.length; i++) {
let dom = mutations[i].addedNodes,
owo_body = '';
if (dom.length == 2 && dom[1].className == 'OwO-body') owo_body = dom[1];
// 如果需要在评论内容中启用此功能请解除下面的注释
// else if (dom.length == 1 && dom[0].className == 'tk-comment') owo_body = dom[0];
else continue;

// 禁用右键(手机端长按会出现右键菜单,为了体验给禁用掉)
if (document.body.clientWidth <= 768) owo_body.addEventListener('contextmenu', e => e.preventDefault());
// 鼠标移入
owo_body.onmouseover = (e) => {
if (flag && e.target.tagName == 'IMG') {
flag = 0;
// 移入300毫秒后显示盒子
owo_time = setTimeout(() => {
let height = e.target.clientHeight * m, // 盒子高 2023-02-16更新
width = e.target.clientWidth * m, // 盒子宽 2023-02-16更新
left = (e.x - e.offsetX) - (width - e.target.clientWidth) / 2, // 盒子与屏幕左边距离 2023-02-16更新
top = e.y - e.offsetY; // 盒子与屏幕顶部距离

if ((left + width) > body.clientWidth) left -= ((left + width) - body.clientWidth + 10); // 右边缘检测,防止超出屏幕
if (left < 0) left = 10; // 左边缘检测,防止超出屏幕
// 设置盒子样式
div.style.cssText = `display:flex; height:${height}px; width:${width}px; left:${left}px; top:${top}px;`;
// 在盒子中插入图片
div.innerHTML = `<img src="${e.target.src}">`
}, 300);
}
};
// 鼠标移出隐藏盒子
owo_body.onmouseout = () => { div.style.display = 'none', flag = 1, clearTimeout(owo_time); }
}

})
observer.observe(document.getElementById('post-comment'), { subtree: true, childList: true }) // 监听的 元素 和 配置项
}

css

css就非常的简单了,只需要在你的自定义css文件内添加如下代码即可:

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
#owo-big {
position: fixed;
align-items: center;
background-color: rgb(255, 255, 255);
border: 1px #aaa solid;
border-radius: 10px;
z-index: 9999;
display: none;
transform: translate(0, -105%);
overflow: hidden;
animation: owoIn 0.3s cubic-bezier(0.42, 0, 0.3, 1.11);
}

[data-theme=dark] #owo-big {
background-color: #4a4a4a
}

#owo-big img {
width: 100%;
}

/* 动画效果代码由 Heo:https://blog.zhheo.com/ 提供 */
@keyframes owoIn {
0% {
transform: translate(0, -95%);
opacity: 0;
}
100% {
transform: translate(0, -105%);
opacity: 1;
}
}

后记

如果那里写的有问题欢迎指出,有什么其他问题可以留言。