QQ表情评论的实现原理和emlog的微信表情一样,在输入框旁提供表情代码(一般是以图片形式显示,比较直观),插入输入框,和将评论内容中的表情代码转换成表情图片。

QQ截图20160123235226.png

一,首先下载QQ表情包上传解压到当前使用模板的根目录,得到一个名称为face的文件夹(附件见文章最后,qqface.zip)

二,上传表情代码与图片转换脚本到当前使用模板的根目录下的js文件夹下(没有的新建一个)(附件见文章最后,emo.js)

emo.js文件内容如下:

var emo = {'[微笑]':'01.gif', '[大哭]':'02.gif', '[尴尬]':'03.gif', '[发怒]':'04.gif', '[调皮]':'05.gif', '[呲牙]':'06.gif', '[惊讶]':'07.gif', '[难过]':'08.gif', '[酷]':'09.gif', '[冷汗]':'10.gif', '[抓狂]':'11.gif', '[撇嘴]':'12.gif', '[吐]':'13.gif', '[偷笑]':'14.gif', '[可爱]':'15.gif', '[白眼]':'16.gif', '[傲慢]':'17.gif', '[饥饿]':'18.gif', '[困]':'19.gif', '[惊恐]':'20.gif', '[流汗]':'21.gif', '[憨笑]':'22.gif', '[色]':'23.gif', '[大兵]':'24.gif', '[奋斗]':'25.gif', '[咒骂]':'26.gif', '[疑问]':'27.gif', '[嘘]':'28.gif', '[晕]':'29.gif', '[折磨]':'30.gif', '[衰]':'31.gif', '[骷髅]':'32.gif', '[敲打]':'33.gif', '[发呆]':'34.gif', '[再见]':'35.gif','[擦汗]':'36.gif','[抠鼻]':'37.gif','[鼓掌]':'38.gif','[糗大了]':'39.gif','[坏笑]':'40.gif','[左哼哼]':'41.gif','[右哼哼]':'42.gif','[哈欠]':'43.gif','[鄙视]':'44.gif','[得意]':'45.gif','[委屈]':'46.gif','[快哭了]':'47.gif','[阴险]':'48.gif','[亲亲]':'49.gif','[吓]':'50.gif','[可怜]':'51.gif','[流泪]':'52.gif','[害羞]':'53.gif','[拥抱]':'54.gif','[闭嘴]':'55.gif','[强]':'56.gif','[弱]':'57.gif','[握手]':'58.gif','[胜利]':'59.gif','[抱拳]':'60.gif','[勾引]':'61.gif','[拳头]':'62.gif','[睡]':'63.gif','[ok]':'64.gif'};

三,打开模板的文章正文页面,如echo_log.php,搜索“allow_remark”,在它的下面一行加入css和javascript

<style>
#faceWraps{
display:none;
width: 500px;
overflow: auto;
position: absolute;
text-align: center;
z-index: 10000;
border-radius: 5px;
border: 1px solid #DDDDDD;
background: #FEFEFE;
}
@media screen and (max-width:500px){
#faceWraps{
width:90%;
}
}
</style>
<script>
$(document).ready(function(){
$("#addface").click(function(e){
var wrap = $("#faceWraps");
if(!wrap.html()){
var emotionsStr = [];
$.each(emo,function(k,v){
emotionsStr.push('<img style="cursor: pointer;padding: 3px;" title="'+k+'" src="<?php echo TEMPLATE_URL; ?>face/'+v+'"/>');
});
wrap.html(emotionsStr.join(""));
}
wrap.children().unbind('click').click(function () {
var val= $("textarea").val();
$("textarea#comment-textarea").val((val||"")+$(this).attr("title"));
$("textarea#comment-textarea").focus();
});
var offset = $(this).offset();
wrap.css({
left : offset.left,
top : offset.top
});
wrap.show();
e.stopPropagation();
e.preventDefault();
$(document.body).unbind('click').click(function (e) {
wrap.hide();
});
$(document).unbind('click').scroll(function (e) {
wrap.hide();
});
});
});

</script>

上面的要获取评论输入框的id或class,没有的可以找到module.php下的发表评论表单函数的<textarea>标签加入id="comment-textarea"即可

接着是表情加载显示的区域和调用emo.js文件的html代码:

<div id="faceWraps"></div>
<script type="text/javascript" src="<?php echo TEMPLATE_URL; ?>js/emo.js"></script>
四,在module.php文件里加入转换函数,用于将评论里的表情代码转换成表情图片
<?php
//替换表情
function xemoFormat($t){
	$emos = array('[微笑]'=>'01.gif', '[大哭]'=>'02.gif', '[尴尬]'=>'03.gif', '[发怒]'=>'04.gif', '[调皮]'=>'05.gif', '[呲牙]'=>'06.gif', '[惊讶]'=>'07.gif', '[难过]'=>'08.gif', '[酷]'=>'09.gif', '[冷汗]'=>'10.gif', '[抓狂]'=>'11.gif', '[撇嘴]'=>'12.gif', '[吐]'=>'13.gif', '[偷笑]'=>'14.gif', '[可爱]'=>'15.gif', '[白眼]'=>'16.gif', '[傲慢]'=>'17.gif', '[饥饿]'=>'18.gif', '[困]'=>'19.gif', '[惊恐]'=>'20.gif', '[流汗]'=>'21.gif', '[憨笑]'=>'22.gif', '[色]'=>'23.gif', '[大兵]'=>'24.gif', '[奋斗]'=>'25.gif', '[咒骂]'=>'26.gif', '[疑问]'=>'27.gif', '[嘘]'=>'28.gif', '[晕]'=>'29.gif', '[折磨]'=>'30.gif', '[衰]'=>'31.gif', '[骷髅]'=>'32.gif', '[敲打]'=>'33.gif', '[发呆]'=>'34.gif', '[再见]'=>'35.gif','[擦汗]'=>'36.gif','[抠鼻]'=>'37.gif','[鼓掌]'=>'38.gif','[糗大了]'=>'39.gif','[坏笑]'=>'40.gif','[左哼哼]'=>'41.gif','[右哼哼]'=>'42.gif','[哈欠]'=>'43.gif','[鄙视]'=>'44.gif','[得意]'=>'45.gif','[委屈]'=>'46.gif','[快哭了]'=>'47.gif','[阴险]'=>'48.gif','[亲亲]'=>'49.gif','[吓]'=>'50.gif','[可怜]'=>'51.gif','[流泪]'=>'52.gif','[害羞]'=>'53.gif','[拥抱]'=>'54.gif','[闭嘴]'=>'55.gif','[强]'=>'56.gif','[弱]'=>'57.gif','[握手]'=>'58.gif','[胜利]'=>'59.gif','[抱拳]'=>'60.gif','[勾引]'=>'61.gif','[拳头]'=>'62.gif','[睡]'=>'63.gif','[ok]'=>'64.gif');
	if(!empty($t) && preg_match_all('/\[.+?\]/',$t,$matches)){
		$matches = array_unique($matches[0]);
		foreach ($matches as $data) {
			if(isset($emos[$data]))
				$t = str_replace($data,'<img title="'.$data.'" src="'.TEMPLATE_URL.'face/'.$emos[$data].'"/>',$t);
		}
	}
	return $t;
}
?>
五,继续在module.php文件夹里找到评论列表,将原评论输出代码
<?php echo $comment['content']; ?>

改为

<?php echo xemoFormat($comment['content']); ?>
子评论列表同样修改


六,最后在评论框旁边插入添加表情按钮


<span id="addface">添加表情</span>


目测完成了。提取码:7ptt

QQ表情相关文件大小:未知 | 来源:百度网盘
已经过安全软件检测无毒,请您放心下载。

全文完