html qq表情插件,jQuery QQ表情插件包使用方法jquery.qqFace.js

最新推荐文章于 2024-11-12 12:51:52 发布

weixin_39640414

最新推荐文章于 2024-11-12 12:51:52 发布

阅读量447

点赞数

文章标签： html qq表情插件

HTML页面的head中引入jQuery库文件和QQ表情插件jquery.qqFace.js文件

2.body中需要有文件框和表情这句如下例子

表情

3.CSS调整.根据自己情况调整.主要是.qqFace.comment-signarea{background-color:#f6f6f6;border-radius:7px;padding:30px 20px;text-align:center;margin-bottom:20px}

.comment-signarea h3{margin:0;padding:0;margin-bottom:15px;font-weight:normal;font-size:18px;cursor:pointer}

#respond .comment{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-title img:hover{cursor:pointer;-moz-transition:all .8s ease-in-out;-webkit-transition:all .8s ease-in-out;-o-transition:all .8s ease-in-out;-ms-transition:all .8s ease-in-out;transition:all .8s ease-in-out;-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}

.comment-box{border:2px solid #ccd4d9;border-radius:2px;padding:4px 4px 0;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:solid 1px #f2f2f2;z-index:5}

.comment-box span.emotion{color:#666;position:absolute;left:-2px;bottom:-2px;height:38px;line-height:38px;padding:0 10px;cursor:pointer}

.comment-box span.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:0 0 6px rgba(51,153,204,.3);-webkit-box-shadow:0 0 6px rgba(51,153,204,.3);box-shadow:0 0 6px rgba(51,153,204,.3)}

.qqFace table td{padding:0}

.qqFace table td img{cursor:pointer}

.qqFace table td img: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:0 0 5px rgba(51,153,204,.9);-webkit-box-shadow:0 0 5px rgba(51,153,204,.9);box-shadow:0 0 5px rgba(51,153,204,.9)}

#comment-submit{position:absolute;right:-2px;bottom:-2px;background:#39c;border:0;border:2px solid;border-color:#39c;border-left:none;border-top:0;padding:0;width:100px;height:38px;color:#FFF;outline:0;border-radius:0 0 2px 0;font-size:16px;z-index:6}

#comment-submit:hover{background:#fbfbfb;border-color:#ccd4d9;color:#39c;border-top:solid 1px #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]之类的代码,我们保存数据库时,应该把该代码替换成实际的图片.这样发布后才能正常的显示出来.

在我们存入数据库时,使用下面的函数进行替换.function replace_em(str){

str = str.replace(/\