评论表情包放大功能，超实用

更新

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

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

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

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

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

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

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

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

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

前言

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

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

效果图

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

教程

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

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

js

直接全选粘贴在自定义js文件内即可(更新也建议直接覆盖)

// 如果当前页有评论就执行函数
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文件内添加如下代码即可：

#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;
    }
}