评论框 添加表情 功能制作

在评论功能里，经常为了使评论的内容更生动，会引用一些动态的表情来表示心情等。

一、表情效果图

二、准备工作

引入外部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

第一个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方法来将表情放到容器里即可。

以上只是一个大致的思路，具体可能还要根据具体工程做样式上的调整。

感兴趣的朋友可以一起交流。