emlog添加多种评论表情--全网无敌首发(五部曲)

  • 内容
  • 相关

我就当你的模板跟我一样是FLY的,虽然很长很麻烦,但是跟着我走,很easy,OK,下面开始我们的教程!(请注意备份)

首先在下方下载表情包,放到模板目录img下面(已经整理完毕),并删除之前的face文件夹。

效果图

第一步

找到模板目录下的inc-->smile.php添加表情展示列表,内容很多,点击这里直接下载替换即可。

第二步

添加切换表情的几个按钮。打开模板目录下的module.php文件,搜索"inc/smile",然后在下方插入以下代码

<ul class="smile_ul">
    <li class="smbgcli facedht"><span>(●'◡'●)ノ</span></li>
    <li><span>阿鲁</span></li>
   <li><span>QQ</span></li>
   <li><span>微博</span></li>
   <li><span>贴吧</span></li>
   <li><span>旧贴吧</span></li>
</ul>

然后将onclick事件,绑定到到下面这个div上

第三步

修改表情栏的样式,在这个位置下方覆盖原本的css样式即可(图中选中的部分)

这里的样式请大佬们自行修改(看个人喜好),下面是我的css样式

#commentform .comment-form-smiley .smiley-box{position:absolute;left:-10px;bottom:30px;background:#fafafa;border:solid #e6e6eb;border-width:1px 0 0 1px;overflow:hidden;padding:5px;}
#commentform .comment-form-smiley .smiley-box .emoji a{display:block;width:40px;float:left;height:40px;line-height:40px;border:solid #e6e6eb;border-width:0 1px 1px 0}
#commentform .comment-form-smiley .smiley-box .emoji a:hover{background:#f0f0f5;}
.smiley-box .emoji a > img{display:block;width:30px;height:30px;margin:5px auto;}
.smiley-box .emoji{width:100%;height:200px;overflow-y:scroll;border:1px solid #e6e6eb;}
.smiley-box .smile_ul{width:100%;padding:16px 5px 5px 5px;height:50px;}
.smiley-box .smile_ul li{float:left;width:auto;line-height:25px;text-align:center;color:#00aaee;border:1px dashed #00aaee;margin-right:2%;transition:all 0.5s;padding:0 8px;font-size:1rem}
.smiley-box .smile_ul li span{display:inline-block;width:100%;height:100%;}
.smiley-box .smile_ul li.smbghov{background:rgba(0,170,238,0.4);color:red;border:1px solid #00aaee;border-radius:5px;}
.smiley-box .smile_ul li.smbgcli{background:rgba(0,170,238,0.8);color:#FFF;border:1px solid #00aaee;border-radius:5px;}
.smiley-box .smile_ul li.facedh{-webkit-animation:face 5s infinite ease-in-out;animation:face 5s infinite ease-in-out;}
.smiley-box .smile_ul li.facedht{-webkit-animation:face 5s infinite ease-in-out;animation:face 5s infinite ease-in-out;}
@-webkit-keyframes face{
    2%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg);}
    4%{-webkit-transform:translateY(-1.5px) rotate(-.5deg);transform:translateY(-1.5px) rotate(-.5deg);}
    6%{-webkit-transform:translateY(1.5px) rotate(-1.5deg);transform:translateY(1.5px) rotate(-1.5deg);}
    8%{-webkit-transform:translateY(-1.5px) rotate(-1.5deg);transform:translateY(-1.5px) rotate(-1.5deg);}
    10%{-webkit-transform:translateY(2.5px) rotate(1.5deg);transform:translateY(2.5px) rotate(1.5deg);}
    12%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg);}
    14%{-webkit-transform:translateY(-1.5px) rotate(1.5deg);transform:translateY(-1.5px) rotate(1.5deg);}
    16%{-webkit-transform:translateY(-.5px) rotate(-1.5deg);transform:translateY(-.5px) rotate(-1.5deg);}
    18%{-webkit-transform:translateY(.5px) rotate(-1.5deg);transform:translateY(.5px) rotate(-1.5deg);}
    20%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg);}
    22%{-webkit-transform:translateY(.5px) rotate(-1.5deg);transform:translateY(.5px) rotate(-1.5deg);}
    24%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform: translateY(1.5px) rotate(1.5deg);}
    26%{-webkit-transform:translateY(.5px) rotate(.5deg);transform:translateY(.5px) rotate(.5deg);}
    28%{-webkit-transform:translateY(.5px) rotate(1.5deg);transform:translateY(.5px) rotate(1.5deg);}
    30%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg);}
    32%,34%{-webkit-transform:translateY(1.5px) rotate(-.5deg);transform:translateY(1.5px) rotate(-.5deg);}
    36%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg);}
    38%{-webkit-transform:translateY(1.5px) rotate(-1.5deg);transform:translateY(1.5px) rotate(-1.5deg);}
    40%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg);}
    42%{-webkit-transform:translateY(2.5px) rotate(-1.5deg);transform:translateY(2.5px) rotate(-1.5deg);}
    44%{-webkit-transform:translateY(1.5px) rotate(.5deg);transform:translateY(1.5px) rotate(.5deg);}
    46%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg);}
    48%{-webkit-transform:translateY(-.5px) rotate(.5deg);transform:translateY(-.5px) rotate(.5deg);}
    50%{-webkit-transform:translateY(.5px) rotate(.5deg);transform:translateY(.5px) rotate(.5deg);}
    52%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg);}
    54%{-webkit-transform:translateY(-1.5px) rotate(1.5deg);transform:translateY(-1.5px) rotate(1.5deg);}
    56%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg);}
    58%{-webkit-transform:translateY(.5px) rotate(2.5deg);transform:translateY(.5px) rotate(2.5deg);}
    60%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg);}
    62%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg);}
    64%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg);}
    66%{-webkit-transform:translateY(1.5px) rotate(-.5deg);transform:translateY(1.5px) rotate(-.5deg);}
    68%{-webkit-transform:translateY(-1.5px) rotate(-.5deg);transform:translateY(-1.5px) rotate(-.5deg);}
    70%{-webkit-transform:translateY(1.5px) rotate(.5deg);transform:translateY(1.5px) rotate(.5deg);}
    72%{-webkit-transform:translateY(2.5px) rotate(1.5deg);transform:translateY(2.5px) rotate(1.5deg);}
    74%{-webkit-transform:translateY(-.5px) rotate(.5deg);transform:translateY(-.5px) rotate(.5deg);}
    76%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg);}
    78%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg);}
    80%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg);}
    82%{-webkit-transform:translateY(-.5px) rotate(.5deg);transform:translateY(-.5px) rotate(.5deg);}
    84%{-webkit-transform:translateY(1.5px) rotate(2.5deg);transform:translateY(1.5px) rotate(2.5deg);}
    86%{-webkit-transform:translateY(-1.5px) rotate(-1.5deg);transform:translateY(-1.5px) rotate(-1.5deg);}
    88%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg);}
    90%{-webkit-transform:translateY(2.5px) rotate(-.5deg);transform:translateY(2.5px) rotate(-.5deg);}
    92%{-webkit-transform:translateY(.5px) rotate(-.5deg);transform:translateY(.5px) rotate(-.5deg);}
    94%{-webkit-transform:translateY(2.5px) rotate(.5deg);transform:translateY(2.5px) rotate(.5deg);}
    96%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg);}
    98%{-webkit-transform:translateY(-1.5px) rotate(-.5deg);transform:translateY(-1.5px) rotate(-.5deg);}
    0%,100%{-webkit-transform:translate(0) rotate(0deg);transform:translate(0) rotate(0deg);}
}
.smiley-box .smile_ul li:last-child{margin:0;}

第四步

写切换表情的js,打开模板目录下js-->main.js里面,搜索"pjax:complete"

然后将以下js代码放在这个方法下面:

$(".emoji a").click(function(){
            $(".smiley-box").slideUp(300);
        });
        $(".smiley-box .smile_ul li").mouseover(function(){
            $(this).addClass("smbghov facedh");
        }).mouseout(function(){
            $(this).removeClass("smbghov facedh");
        });
        $(".smile_ul li").click(function(){
            $(".smiley-box .emoji").eq($(this).index()).removeClass("hide").siblings(".emoji").addClass("hide");
        });
        $(".smiley-box .smile_ul li span").click(function(){
            $(this).parent().addClass("smbgcli facedht").siblings().removeClass("smbgcli facedht");
        });

这里请注意:

因为FLY是pjax,手机端使用的话需要在这个js文件的最下面再复制粘贴一下上面的js代码,并且将下面代码一起写上

function smileWidth(){
    var comm2 = $("#comments2").width();
    $(".smiley-box").width(comm2 + 15);
}
window.setInterval("smileWidth()",10);

第五步

判断输出表情图片。打开模板目录下的module.php文件,搜索"comcontent($pl)",修改这个里面的方法为:

$emoji=[
        'Ff'=>['path'=>'face','ext'=>'png'],
        'Fo'=>['path'=>'oldtieba','ext'=>'png'],
        'Fa'=>['path'=>'aru','ext'=>'png'],
        'Fq'=>['path'=>'qq','ext'=>'gif'],
        'Fw'=>['path'=>'weibo','ext'=>'png'],
        'Ft'=>['path'=>'tieba','ext'=>'png'],
    ];
    $pl=str_replace(']','] ',$pl);
    $pl=str_replace('[',' [',$pl);
    $pl=str_replace('  ',' ',$pl);
    $str=explode(' ',$pl);

    foreach ($str as $k=>$v){
        if (preg_match("/\[(\w+)\]/",$v)>0){
            if($v=='[blockquote]'){
                $new_pl[$k]=str_replace("[blockquote]", '<blockquote>',$v);
                continue;
            }

            $v_fm=str_replace('[','',$v);
            $v_fm=str_replace(']','',$v_fm);
            $emo=substr($v_fm,0,2);
            $imgName=substr($v_fm,2,3);

            $patterns ="/\[".$emo."(\d+)\]/";
            $replace = '<img class="emoji_img" alt="表情" src="' . TEMPLATE_URL . 'img/emoji/'.$emoji[$emo]['path'].'/'.$imgName.'.'.$emoji[$emo]['ext'].'"/>';
            $new_pl[$k]= preg_replace($patterns, $replace, $v);
        }else if($v=="[/blockquote]"){
            $new_pl[$k]=str_replace("[/blockquote]", '</blockquote>',$v);
        }else{
            $new_pl[$k]= $v;
        }
    }
    echo implode(' ',$new_pl);

并且把这个方法复制到"sidecomcontent($pl)"方法当中去。修改其中的<blockquote></blockquote>分别为<small></small>

至此,搞定收工。

有任何问题请联系:597782047

转载请注明出处:http://www.prm612.top/post/158

管理员设置回复可下载
< 六十二博客 >

本文标签:

版权声明: 若无特殊注明,本文皆为《 六十二丶 》原创,转载请保留文章出处。

本文链接: emlog添加多种评论表情--全网无敌首发(五部曲) 》 - https://prm612.top/post-158.html

解压说明: 如本站部分资源使用时需输入解压密码,本站所有资源的解压密码均默认为: prm612

收录情况: 百度暂未收录

站长QQ: 597782047 点击这里给我发消息 本网站的资源部分来源于网络,如有侵权,请 联系站长 进行删除处理。

本站留言 - 投诉建议: Email:597782047@qq.com 链接失效?( 点击提交 )请说明失效链接地址+名称

本站网址: https://prm612.top/

发表评论

电子邮件地址不会被公开。 必填项已用*标注

未显示?请点击刷新

允许邮件通知

评论

6条评论
  1. avatar

    Curtain

    Google Chrome 68.0.3440.15 Google Chrome 68.0.3440.15

    非主流操作系统 非主流操作系统

    回复

    滴!学生卡!打卡时间:上午11:05:21,请上车的乘客系好安全带~

    北京市海淀区 联通

    1. avatar

      谷商

      Google Chrome 63.0.3239.26 Google Chrome 63.0.3239.26

      Windows 7 Windows 7

      回复

      不错的好文,学习了

      北京市 联通

      1. avatar

        百万链

        UBrowser 8.7 UBrowser 8.7

        Windows 7 Windows 7

        回复

        初来贵站觉得很不错!百万链已收录贵站,期待和站长的长期合作?

        河南省洛阳市 移动

        1. avatar

          一块乐

          Google Chrome 70.0.3538.110 Google Chrome 70.0.3538.110

          Mac OSX 10_14_0 Mac OSX 10_14_0

          回复

          寥落古行宫,宫花寂寞红。
          你还在为老板打工吗?你还在因为18年经济下行担心被裁员吗?你还在担心赚的钱太少了吗?请关注小峰分享 http://www.rongdaizhijia.cn  每日分享最新的赚钱项目和技巧,提供给你第一手的创业信息。

          四川省成都市 联通

          1. avatar

            杰新博客

            Google Chrome 63.0.3239.132 Google Chrome 63.0.3239.132

            Windows 7 Windows 7

            回复

            表情 写得好好哟,我要你给我生猴子!

            浙江省杭州市 电信

            1. 六十二丶

              Google Chrome 70.0.3538.67 Google Chrome 70.0.3538.67

              Windows 7 Windows 7

              回复

              @杰新博客: 表情 终于弄好了,睡觉睡觉

              浙江省杭州市 电信

          正在加载...

          点击↑关闭 2019年,祝大家
          “诸”事吉祥!
          网站备案相关信息
          域名
          主办方名称
          主办单位性质
          主体备案号
          ICP备案号
          首页地址 https://prm612.top/ [备案查询]
          网站名称
          审核时间
          00:00 / 00:00
          随机播放