在前面的一篇文章《HTML5仿手机微信聊天》中，我写了如何利用HTML5的知识仿微信的聊天功能。今天QQ群里的网友问题，如何给聊天回话中加上表情，这里我再分享一下做法！
昨天其实很简单，点击表情时，弹出一个聊天表情选择框！如下：
选择表情框后，在聊天输入框中显示对应的符号。点击发送后，在聊天界面中显示对应的img表情即可。
全部代码如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="jquery,QQ表情">
<meta name="description" content="聊天表情、CSS、jquery、PHP案例和示例">
<title>基于jQuery的QQ表情插件</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery.qqFace.js"></script>
<script type="text/javascript">
$(function(){
$('.emotion').qqFace({
id : 'facebox', //表情盒子的ID
assign:'saytext', //给那个控件赋值
path:'face/' //表情存放的路径
});
$(".sub_btn").click(function(){
var str = $("#saytext").val();
$("#show").html(replace_em(str));
});
});
//查看结果
function replace_em(str){
str = str.replace(//</g,'<');
str = str.replace(//>/g,'>');
str = str.replace(//n/g,'<br/>');
str = str.replace(//[em_([0-9]*)/]/g,'<img src="face/\.gif" border="0" />');
return str;
}
</script>
<style>
.comment{width:680px; margin:20px auto; position:relative}
.comment h3{height:28px; line-height:28px}
.com_form{width:100%; position:relative}
.input{width:99%; height:60px; border:1px solid #ccc}
.com_form p{height:28px; line-height:28px; position:relative}
span.emotion{width:42px; height:20px; background:url(icon.gif)
no-repeat 2px 2px; padding-left:20px; cursor:pointer}
span.emotion:hover{background-position:2px -28px}
.qqFace{margin-top:4px;background:#fff;padding:2px;border:1px #dfe6f6 solid;}
.qqFace table td{padding:0px;}
.qqFace table td img{cursor:pointer;border:1px #fff solid;}
.qqFace table td img:hover{border:1px #0066cc solid;}
#show{width:680px; margin:20px auto}
.sub_btn {
position:absolute; right:0px; top:0;
display: inline-block;
zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
*display: inline;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-align: center;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.6);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
color: #e8f0de;
border: solid 1px #538312;
background: #64991e;
background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));
background: -moz-linear-gradient(top, #7db72f, #4e7d0e);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');
}
.sub_btn:hover {
background: #538018;
background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));
background: -moz-linear-gradient(top, #6b9d28, #436b0c);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');
}
</style>
</head>
<body>
<div id="header">
<div id="logo" style="text-align:center;">
<h1><a href="http://www.xttblog.com" title="返回 首页"></a>
</h1></div>
</div>
<div id="main">
<div style="text-align:center;"><h2 class="top_title">
<a href="http://www.xttblog.com">分享一款基于jQuery的QQ表情插件</a></h2></div>
<br/><br/>
<div id="show"></div>
<div class="comment">
<div class="com_form">
<textarea class="input" id="saytext" name="saytext"></textarea>
<p><input type="button" class="sub_btn" value="提交"><span class="emotion">表情</span></p>
</div>
</div>
</div>
</div>
</body>
</html>
源码已共享在QQ群，或者访问http://www.codedq.net/blog/articles/111.html进行下载！
： » 实现web 聊天 支持表情聊天功能
原创文章，作者：carmelaweatherly，如若转载，请注明出处：https://blog.ytso.com/251169.html