版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_30500113/article/details/74852467
效果图：
css部分
<style type="text/css">
*{margin:0;padding:0;}
body{font-size:12px;font-family:"微软雅黑";background:url("images/bg.jpg") no-repeat;background-size:cover;color:#666;}
img{border:0;}
ul li{list-style:none;}
a{text-decoration:none;}
.qq{width:600px;height:200px;background:#fffcf4;border:1px solid #ebe3bc;margin:200px auto;position:relative;}
.qq .q_title{font-size:14px;padding:10px 0 0 20px;}
.qq .q_msg{width:538px;height:48px;border:1px solid #ebe3bc;margin:15px auto;background:#fff;font-size:14px;padding:10px;color:red;}
/*文本框里的表情有2px的间隔*/
.qq .q_msg img{padding:2px;}
.qq .q_face{float:left;margin-left:20px;}
/*按钮*/
.qq .btn{width:80px;height:30px;border:0;background:orange;color:#fff;font-size:14px;font-family:"微软雅黑";border-radius:3px;margin-left:455px;}
/*表情区域父盒子*/
.qq .q_allface{width:514px;height:210px;border:1px solid #D0D0D0;position:absolute;top:160px;left:20px;background:#fff;box-shadow:0 0 10px #D7D7D7;box-shadow:1px 1px 8px red;
display:none;
}
/*左边盒子*/
.qq .q_allface .f_ul{width:119px;height:210px;background:#f8f8f8;float:left;}
.qq .q_allface ul li{line-height:30px;border-bottom:1px solid #fff;padding-left:10px;}
/*右边盒子*/
.qq .q_allface .q_img{width:390px;height:210px;float:right;}
/*表情列表*/
.qq .q_allface .q_img ul li{float:left;margin:2px;cursor:pointer;}
/*内容区父盒子*/
.msg_box{margin:100px auto;}
/*小盒子*/
.msg_box .m_list{width:600px;height:120px;background:#fff;border-radius:3px;margin-top:20px;}
/*头像和个人信息部分*/
.msg_box .m_list .m_header{height:50px;}
/*让头像变圆角*/
.msg_box .m_list .m_header img{border-radius:50%;margin-top:5px;}
/*a链接部分*/
.msg_box .m_list .m_header a{display:block;line-height:50px;float:left;margin-left:20px;color:#666;font-size:14px;}
.msg_box .m_list .m_header a:hover{color:red;opacity:.65;}
/*发表的内容区域*/
.msg_box .m_list .m_con{width:500px;height:40px;line-height:40px;color:#333;}
</style>
<link type="text/css" rel="stylesheet" href="css/animate.min.css">html部分
<div class="qq">
<p class="q_title">谷歌十年个人QQ: 870162355</p>
<!-- contentEditable="true" 让div变成可编辑区域 不用textarea -->
<div class="q_msg" contentEditable="true"></div>
<a href="#" class="q_face">
<img src="images/faces/2-121101200423.gif" width="24" height="24" alt="qq表情">
</a>
<button class="btn">发表</button>
<div class="q_allface">
<ul class="f_ul">
<li>微博-表情</li>
<li>陌陌-表情</li>
<li>微信-表情</li>
<li>qq-表情</li>
</ul>
<div class="q_img">
<ul>
<li><img src="images/faces/2-121101200405.gif" ></li>
<li><img src="images/faces/2-121101200406.gif" ></li>
<li><img src="images/faces/2-121101200406-50.gif" ></li>
<li><img src="images/faces/2-121101200406-51.gif" ></li>
<li><img src="images/faces/2-121101200407.gif" ></li>
<li><img src="images/faces/2-121101200407-50.gif" ></li>
<li><img src="images/faces/2-121101200407-51.gif" ></li>
<li><img src="images/faces/2-121101200408.gif" ></li>
<li><img src="images/faces/2-121101200408-50.gif" ></li>
<li><img src="images/faces/2-121101200409.gif" ></li>
<li><img src="images/faces/2-121101200409-50.gif" ></li>
<li><img src="images/faces/2-121101200409-51.gif" ></li>
<li><img src="images/faces/2-121101200410.gif" ></li>
<li><img src="images/faces/2-121101200410-50.gif" ></li>
<li><img src="images/faces/2-121101200410-51.gif" ></li>
<li><img src="images/faces/2-121101200411.gif" ></li>
<li><img src="images/faces/2-121101200412-50.gif"></li>
<li><img src="images/faces/2-121101200412.gif"></li>
<li><img src="images/faces/2-121101200413.gif"></li>
<li><img src="images/faces/2-121101200413-50.gif"></li>
<li><img src="images/faces/2-121101200414.gif"></li>
<li><img src="images/faces/2-121101200414-50.gif"></li>
<li><img src="images/faces/2-121101200415.gif"></li>
<li><img src="images/faces/2-121101200415-50.gif"></li>
<li><img src="images/faces/2-121101200416.gif"></li>
<li><img src="images/faces/2-121101200416-50.gif"></li>
<li><img src="images/faces/2-121101200417.gif"></li>
<li><img src="images/faces/2-121101200418.gif"></li>
<li><img src="images/faces/2-121101200418-50.gif"></li>
<li><img src="images/faces/2-121101200419-50.gif"></li>
<li><img src="images/faces/2-121101200420.gif"></li>
<li><img src="images/faces/2-121101200421.gif"></li>
<li><img src="images/faces/2-121101200421-50.gif"></li>
<li><img src="images/faces/2-121101200424.gif"></li>
<li><img src="images/faces/2-121101200445.gif"></li>
<li><img src="images/faces/2-121101200449.gif"></li>
<li><img src="images/faces/2-121101200447.gif"></li>
</ul>
</div>
</div>
<!--发表内容列表区域-->
<div class="msg_box">
</div>
</div>
jquery部分
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(".q_face").click(function(){
$(".q_allface").toggle(400);
});
$(".q_img").find("li").click(function(){
//点击的时候克隆一份给上面的文本框里
var img = $(this).find("img").clone();
//利用append添加上去
$(".q_msg").append(img);
});
//按钮点击事件
$(".btn").click(function(){
//获取输入的内容
var content = $(".q_msg").text();
//如果内容为空 就获取焦点
if(content == ""){
$(".q_msg").focus();
return;
}
//ajax拼接
var html = $("<div class='m_list animated bounceIn'>"+
"<div class='m_header'>"+
"<a href='#'><img src='../time/3.jpg' width='50' height='50' border='0' alt=''></a>"+
"<a href='#'>文秀</a>"+
"</div>"+
"<div class='m_con'>"+
""+$(".q_msg").html()+""+
"</div>"+
"</div>");
$(".msg_box").prepend(html);
});