cnblog部署emoji(图片版本)

版本

图片。如果有svg格式的，请给我留个言，分享一下资源！

部署效果

书写格式： <span>[微笑]</span> -->  [微笑]

而且会随着字体的变大而变大<h1>中部署的效果：  <h1>微笑一下：<span>[微笑]</span><h1> -->  

微笑一下：[微笑]

资源来源

https://www.cnblogs.com/wbl001/p/11457460.html

部署过程

部署位置

 在cnblog的设置界面中填写css和js部分。

css部分

.qqface {
    display: inline-block;
    width: 28px;
    height: 28px;
    font-size: 0;
    text-indent: -999em;
    background: url('https://xunhanliu.gitee.io/images/qqface.png') 0 0 no-repeat;
}

.qqface-parent {
    display: inline-block;
    height: 0px;
    vertical-align: top;
    text-align: center;
}
.qqface.small {

    height: 24px !important;
    width: 24px;
    transform: scale(0.82);
    margin-top: -5px;
    margin-left: -3px;
}

.qqface.qqface0 {
    background-position: 0 0;
}

.qqface.qqface1 {
    background-position: -29px 0;
}

.qqface.qqface2 {
    background-position: -58px 0;
}

.qqface.qqface3 {
    background-position: -87px 0;
}

.qqface.qqface4 {
    background-position: -116px 0;
}

.qqface.qqface5 {
    background-position: -145px 0;
}

.qqface.qqface6 {
    background-position: -174px 0;
}

.qqface.qqface7 {
    background-position: -203px 0;
}

.qqface.qqface8 {
    background-position: -232px 0;
}

.qqface.qqface9 {
    background-position: -261px 0;
}

.qqface.qqface10 {
    background-position: -290px 0;
}

.qqface.qqface11 {
    background-position: -319px 0;
}

.qqface.qqface12 {
    background-position: -348px 0;
}

.qqface.qqface13 {
    background-position: -377px 0;
}

.qqface.qqface14 {
    background-position: -406px 0;
}

.qqface.qqface15 {
    background-position: 0 -29px;
}

.qqface.qqface16 {
    background-position: -29px -29px;
}

.qqface.qqface17 {
    background-position: -58px -29px;
}

.qqface.qqface18 {
    background-position: -87px -29px;
}

.qqface.qqface19 {
    background-position: -116px -29px;
}

.qqface.qqface20 {
    background-position: -145px -29px;
}

.qqface.qqface21 {
    background-position: -174px -29px;
}

.qqface.qqface22 {
    background-position: -203px -29px;
}

.qqface.qqface23 {
    background-position: -232px -29px;
}

.qqface.qqface24 {
    background-position: -261px -29px;
}

.qqface.qqface25 {
    background-position: -290px -29px;
}

.qqface.qqface26 {
    background-position: -319px -29px;
}

.qqface.qqface27 {
    background-position: -348px -29px;
}

.qqface.qqface28 {
    background-position: -377px -29px;
}

.qqface.qqface29 {
    background-position: -406px -29px;
}

.qqface.qqface30 {
    background-position: 0 -58px;
}

.qqface.qqface31 {
    background-position: -29px -58px;
}

.qqface.qqface32 {
    background-position: -58px -58px;
}

.qqface.qqface33 {
    background-position: -87px -58px;
}

.qqface.qqface34 {
    background-position: -116px -58px;
}

.qqface.qqface35 {
    background-position: -145px -58px;
}

.qqface.qqface36 {
    background-position: -174px -58px;
}

.qqface.qqface37 {
    background-position: -203px -58px;
}

.qqface.qqface38 {
    background-position: -232px -58px;
}

.qqface.qqface39 {
    background-position: -261px -58px;
}

.qqface.qqface40 {
    background-position: -290px -58px;
}

.qqface.qqface41 {
    background-position: -319px -58px;
}

.qqface.qqface42 {
    background-position: -348px -58px;
}

.qqface.qqface43 {
    background-position: -377px -58px;
}

.qqface.qqface44 {
    background-position: -406px -58px;
}

.qqface.qqface45 {
    background-position: 0 -87px;
}

.qqface.qqface46 {
    background-position: -29px -87px;
}

.qqface.qqface47 {
    background-position: -58px -87px;
}

.qqface.qqface48 {
    background-position: -87px -87px;
}

.qqface.qqface49 {
    background-position: -116px -87px;
}

.qqface.qqface50 {
    background-position: -145px -87px;
}

.qqface.qqface51 {
    background-position: -174px -87px;
}

.qqface.qqface52 {
    background-position: -203px -87px;
}

.qqface.qqface53 {
    background-position: -232px -87px;
}

.qqface.qqface54 {
    background-position: -261px -87px;
}

.qqface.qqface55 {
    background-position: -290px -87px;
}

.qqface.qqface56 {
    background-position: -319px -87px;
}

.qqface.qqface57 {
    background-position: -348px -87px;
}

.qqface.qqface58 {
    background-position: -377px -87px;
}

.qqface.qqface59 {
    background-position: -406px -87px;
}

.qqface.qqface60 {
    background-position: 0 -116px;
}

.qqface.qqface61 {
    background-position: -29px -116px;
}

.qqface.qqface62 {
    background-position: -58px -116px;
}

.qqface.qqface63 {
    background-position: -87px -116px;
}

.qqface.qqface64 {
    background-position: -116px -116px;
}

.qqface.qqface65 {
    background-position: -145px -116px;
}

.qqface.qqface66 {
    background-position: -174px -116px;
}

.qqface.qqface67 {
    background-position: -203px -116px;
}

.qqface.qqface68 {
    background-position: -232px -116px;
}

.qqface.qqface69 {
    background-position: -261px -116px;
}

.qqface.qqface70 {
    background-position: -290px -116px;
}

.qqface.qqface71 {
    background-position: -319px -116px;
}

.qqface.qqface72 {
    background-position: -348px -116px;
}

.qqface.qqface73 {
    background-position: -377px -116px;
}

.qqface.qqface74 {
    background-position: -406px -116px;
}

.qqface.qqface75 {
    background-position: 0 -145px;
}

.qqface.qqface76 {
    background-position: -29px -145px;
}

.qqface.qqface77 {
    background-position: -58px -145px;
}

.qqface.qqface78 {
    background-position: -87px -145px;
}

.qqface.qqface79 {
    background-position: -116px -145px;
}

.qqface.qqface80 {
    background-position: -145px -145px;
}

.qqface.qqface81 {
    background-position: -174px -145px;
}

.qqface.qqface82 {
    background-position: -203px -145px;
}

.qqface.qqface83 {
    background-position: -232px -145px;
}

.qqface.qqface84 {
    background-position: -261px -145px;
}

.qqface.qqface85 {
    background-position: -290px -145px;
}

.qqface.qqface86 {
    background-position: -319px -145px;
}

.qqface.qqface87 {
    background-position: -348px -145px;
}

.qqface.qqface88 {
    background-position: -377px -145px;
}

.qqface.qqface89 {
    background-position: -406px -145px;
}

.qqface.qqface90 {
    background-position: 0 -174px;
}

.qqface.qqface91 {
    background-position: -29px -174px;
}

.qqface.qqface92 {
    background-position: -58px -174px;
}

.qqface.qqface93 {
    background-position: -87px -174px;
}

.qqface.qqface94 {
    background-position: -116px -174px;
}

.qqface.qqface95 {
    background-position: -145px -174px;
}

.qqface.qqface96 {
    background-position: -174px -174px;
}

.qqface.qqface97 {
    background-position: -203px -174px;
}

.qqface.qqface98 {
    background-position: -232px -174px;
}

.qqface.qqface99 {
    background-position: -261px -174px;
}

.qqface.qqface100 {
    background-position: -290px -174px;
}

.qqface.qqface101 {
    background-position: -319px -174px;
}

.qqface.qqface102 {
    background-position: -348px -174px;
}

.qqface.qqface103 {
    background-position: -377px -174px;
}

.qqface.qqface104 {
    background-position: -406px -174px;
}

js部分

$(function () {
    var qqfaceArr = [['[微笑]', '0'], ['[撇嘴]', '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'], ['[爱你]', '87'], ['[NO]', '88'], ['[OK]', '89'], ['[爱情]', '90'],
    ['[飞吻]', '91'], ['[跳跳]', '92'], ['[发抖]', '93'], ['[怄火]', '94'], ['[转圈]', '95'], ['[磕头]', '96'], ['[回头]', '97'], ['[跳绳]', '98'], ['[投降]', '99'], ['[激动]', '100'], ['[乱舞]', '101'], ['[献吻]', '102'], ['[左太极]', '103'], ['[右太极]', '104']];
    var qqfaceMap = new Map(qqfaceArr);
    let $span = $('span');
    for (let i = 0; i < $span.length; i++) {
        let element = $span[i];

        let emoji_txt = element.textContent;
        if (/^[[u4e00-u9fa5]+]$/.test(emoji_txt)) {
            let $element = $(element);
            let parentHeight = $(element.parentNode).height();
            let rate = parentHeight / 21;
            $element.width(28 * rate);
            element.textContent = '';
            element.classList.add('qqface-parent')
            $element.html(`<span class="qqface qqface${qqfaceMap.get(emoji_txt)}" style='transform: scale(${rate})'></span>`)

        }
    }
});