JQ QQ表情插件

相信前端开发人员在接触到聊天室或者是直播项目时，总的来说，只要是触及到聊天信息发送等功能就免不了表情的发送，最近小编写项目的项目过程就遇到了这样的情况，在网上查询到相应的插件后想到，好东西自然是得分享出来的，故而将代码贴出来给大家参考。
CSS：

.comment {
				width: 680px;
				margin: 20px auto;
				position: relative;
				background: #fff;
				padding: 20px 50px 50px;
				border: 1px solid #DDD;
				border-radius: 5px;
			}
			
			.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;
				margin-top: 10px;
			}
			
			span.emotion {
				width: 42px;
				height: 20px;
			}
			
			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: 770px;
				margin: 20px auto;
				background: #fff;
				padding: 5px;
				border: 1px solid #DDD;
				vertical-align: top;
			}
			
			.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');
			}

HTML：

	

		
		
表情
	

JS：

注：以上需要在引入bootstrap.min.css、jquery.js、jquery.qqFace.js等文件的基础上才可生效，大家记住哦~
所有文件可进行百度云下载：
链接：https://pan.baidu.com/s/12t48Xvk5pH2k2pFD7RAzfQ
提取码：cx7k

希望对有需要的伙伴们有帮助