在评论功能里，经常为了使评论的内容更生动，会引用一些动态的表情来表示心情等。
一、表情效果图
二、准备工作
引入外部js和css文件
1.引入js文件，由于功能的原生js代码依赖jquery，所以还得提前导入jquery.js文件
2.引入css文件
** js和css文件下载地址：我是下载地址
3.文件目录
找到master文件夹，打开可见以下目录。打开对应的js和css文件夹复制到工程中即可。
后缀为.min.css或.min.js的文件是压缩文件，没有的为源代码文件。
三、代码
html页面代码和js代码
1.html代码
<div class="face_box"><div id="feeling" class="textarea face_content" placeholder="说点儿什么吧" contenteditable="true"></div><div><a class="face"><span></span><p>添加表情</p></a><button type="button" id="publish" οnclick="publish()">发表</button></div></div>
说明：这里要定义三个div
第一个div : face_box 包含了添加表情的div和文本域div
第二个div : id为feeling的那个，是用来装载评论内容的，一般直接写成文本域textarea，这里为了装载表情，用div，自定义样式textarea装换成文本域可输入文字
第三个div : 功能按钮，包括添加表情、发表评论等。
2.js代码
//加载表情$(document).on("click",".face",function(event){ //添加表情那个链接的class名用来当做点击的触发事件if(! $('#sinaEmotion').is(':visible')){ //这句不用管，有兴趣可以看js源代码里var facebox = $(this).parents(".face_box").find(".face_content"); //定义facebox是用来装表情的div框框$(this).sinaEmotion(facebox); //把表情放到上面定义的容器框框里}});
原理：点击添加表情触发一个事件 》定义一个div来作为表情的容器框框(一般直接用第二个div) 》调用外部文件里的sinaEmotion方法来将表情放到容器里即可。
以上只是一个大致的思路，具体可能还要根据具体工程做样式上的调整。
感兴趣的朋友可以一起交流。
