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添加多种评论表情--全网无敌首发(五部曲) 》 - http://www.minhouse.top/post-158.html

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

收录情况: 本文百度已收录

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

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

本站网址: http://www.minhouse.top/

发表评论

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

未显示?请点击刷新

允许邮件通知

评论

8条评论
  1. avatar

    rt

    Google Chrome 63.0.3239.132 Google Chrome 63.0.3239.132

    Windows 7 Windows 7

    回复

    买快递单号,上单号购买网 www.danhw.com

    IP数据库文件不存在或者禁止访问或者已经被删除!

    1. avatar

      爱奇博客

      Google Chrome 63.0.3239.132 Google Chrome 63.0.3239.132

      Windows 7 Windows 7

      回复

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

      IP数据库文件不存在或者禁止访问或者已经被删除!

      1. avatar

        Curtain

        Google Chrome 68.0.3440.15 Google Chrome 68.0.3440.15

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

        回复

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

        IP数据库文件不存在或者禁止访问或者已经被删除!

        1. avatar

          谷商

          Google Chrome 63.0.3239.26 Google Chrome 63.0.3239.26

          Windows 7 Windows 7

          回复

          不错的好文,学习了

          IP数据库文件不存在或者禁止访问或者已经被删除!

          1. avatar

            百万链

            UBrowser 8.7 UBrowser 8.7

            Windows 7 Windows 7

            回复

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

            IP数据库文件不存在或者禁止访问或者已经被删除!

            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  每日分享最新的赚钱项目和技巧,提供给你第一手的创业信息。

              IP数据库文件不存在或者禁止访问或者已经被删除!

              1. avatar

                杰新博客

                Google Chrome 63.0.3239.132 Google Chrome 63.0.3239.132

                Windows 7 Windows 7

                回复

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

                IP数据库文件不存在或者禁止访问或者已经被删除!

                1. 六十二丶

                  Google Chrome 70.0.3538.67 Google Chrome 70.0.3538.67

                  Windows 7 Windows 7

                  回复

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

                  IP数据库文件不存在或者禁止访问或者已经被删除!

              正在加载...

              点击↑关闭
              吉祥如意,
              新年快乐!
              网站备案相关信息
              域名
              主办方名称
              主办单位性质
              主体备案号
              ICP备案号
              首页地址 http://www.minhouse.top/ [备案查询]
              网站名称
              审核时间