HTML页面的head中引入jQuery库文件和QQ表情插件jquery.qqFace.js文件
2.body中需要有文件框和表情这句如下例子
表情
评论
3.CSS调整.根据自己情况调整.主要是.ment-signarea{background-color:#f6f6f6;border-radius:7px;padding:30px20px;text-align:center;margin-bottom:20px}
.comment-signareah3{margin:0;padding:0;margin-bottom:15px;font-weight:normal;font-size:18px;cursor:pointer}
#ment{position:relative;padding-left:46px}
.comment-title{font-size:12px;color:#999;float:left;margin-left:-46px;width:36px;text-align:center}
.comment-title.avatar{height:36px;width:36px;border-radius:50%;margin-bottom:5px}
.comment-titleimg:hover{cursor:pointer;-moz-transition:all.8sease-in-out;-webkit-transition:all.8sease-in-out;-o-transition:all.8sease-in-out;-ms-transition:all.8sease-in-out;transition:all.8sease-in-out;-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}
.comment-box{border:2pxsolid#ccd4d9;border-radius:2px;padding:4px4px0;background-color:#FFF;position:relative;z-index:10}
#comment-textarea{width:100%;resize:none;overflow-x:hidden;overflow-y:auto;border:0;line-height:22px;font-size:14px;outline:0;color:#666;height:68px}
#comment-textarea::-webkit-scrollbar{width:3px;height:3px;background:#CCC;border-radius:5px}
#comment-textarea::-webkit-scrollbar-button{display:none}
#comment-textarea::-webkit-scrollbar-track-piece{display:none}
#comment-textarea::-webkit-scrollbar-thumb{background:#999;border-radius:5px}
#comment-textarea::-webkit-scrollbar-thumb:hover{background:#39c}
.comment-ctrl{background-color:#fbfbfb;height:36px;margin-left:-4px;border-top:solid1px#f2f2f2;z-index:5}
.comment-boxspan.emotion{color:#666;position:absolute;left:-2px;bottom:-2px;height:38px;line-height:38px;padding:010px;cursor:pointer}
.comment-boxspan.emotion:hover{color:#39c;-webkit-transform:scale(1.1);transform:scale(1.1);-webkit-transition-timing-function:cubic-bezier(0.47,2.02,0.31,-0.36);transition-timing-function:cubic-bezier(0.47,2.02,0.31,-0.36)}
.qqFace{margin-top:4px;background:#FFF;padding:2px;border-radius:5px;-moz-box-shadow:006pxrgba(51,153,204,.3);-webkit-box-shadow:006pxrgba(51,153,204,.3);box-shadow:006pxrgba(51,153,204,.3)}
.qqFacetabletd{padding:0}
.qqFacetabletdimg{cursor:pointer}
.qqFacetabletdimg:hover{-webkit-transform:scale(1.05);transform:scale(1.05);-webkit-transition-timing-function:cubic-bezier(0.47,2.02,0.31,-0.36);transition-timing-function:cubic-bezier(0.47,2.02,0.31,-0.36);-moz-box-shadow:005pxrgba(51,153,204,.9);-webkit-box-shadow:005pxrgba(51,153,204,.9);box-shadow:005pxrgba(51,153,204,.9)}
#comment-submit{position:absolute;right:-2px;bottom:-2px;background:#39c;border:0;border:2pxsolid;border-color:#39c;border-left:none;border-top:0;padding:0;width:100px;height:38px;color:#FFF;outline:0;border-radius:002px0;font-size:16px;z-index:6}
#comment-submit:hover{background:#fbfbfb;border-color:#ccd4d9;color:#39c;border-top:solid1px#f2f2f2}
.comment-prompt{cursor:pointer;display:none;text-align:center;font-size:14px;line-height:38px;color:#39c}
.comment-prompt:hover{color:#f46d6d}
4.在调用的当前页面加上如下函数$(function(){
$('.emotion').qqFace({
id:'facebox',
assign:'comment-textarea',
path:'__STATIC__/index/images/arclist/'//表情存放的路径
});
});
现在就可以发表情了.点击小表情发布出去的是类似[em_5]之类的代码,我们保存数据库时,应该把该代码替换成实际的图片.这样发布后才能正常的显示出来.
在我们存入数据库时,使用下面的函数进行替换.functionreplace_em(str){
str=str.replace(/\
str=str.replace(/\>/g,'>');
str=str.replace(/\[em_([0-9]*)\]/g,'');
returnstr;
}
