基于jQuery的QQ表情插件

别瞎说，先给你看效果图：

查看演示下载源代码

当我们在QQ上聊天或者做评论或者微博的时候，会有一个允许添加表情的功能。点击表情按钮，会弹出一系列小表情图片。选择一个表达式图片来发布包含表达式的丰富内容。今天就给大家分享一个基于jQuery的QQ表情插件，你可以轻松应用到你的项目中。

超文本标记语言

首先在html页面的头部引入jQuery库文件和QQ表情符号jquery.qqFace.js文件。

脚本类型=' text/JavaScript ' src=' http : jquery-1 . 7 . 2 . min . js '/script script类型=' text/JavaScript ' src=' http 3360 jquery . QQ face . js '/script然后将以下html代码添加到正文中：

div id=' show '/div class=' comment ' div class=' com _ form ' text area class=' input ' id=' say text ' name=' say text '/text area PSPAN class=' emotion '表情符号/Span input type=' button ' class=' sub _ BTN ' value=' submit '/p/div/div页面有一个输入框用于输入要发布的内容，还有一个表情符号按钮。点击此按钮调用表情图片，然后点击“提交”按钮发布带有表情的内容。

半铸钢钢性铸铁(Cast Semi-Steel)

我们用CSS来美化页面。关键是鼠标上滑和移开效果的表情按钮图片跨度.情感，和表情。调用表情插件后显示的qqFace面板效果。请参见代码：注释{ width:680pxmargin:20px汽车；位置：relative}。注释h3 { height:28px线高：28px}。com _ form { width :100%；位置：relative}。输入{ width :99%；高度：60 px；border:1px实心#ccc}。com _ form p { height:28px行高：28 px；position : relative } span . emotion { width :42 px；高度：20 px；background : URL(icon . gif)no-repeat 2px 2px；左填充left:20pxcursor : pointer } span . emotion : hover { background-position :2 px-28px }。QQ face { margin-top :4 px；背景# fffpadding:2pxborder:1px #dfe6f6固体；} .qqFace表td { padding:0px} .qqFace表td img { cursor:pointerborder:1px #fff固体；} .QQ face table TD img : hover { border :1 px # 0066 cc solid；} # show { width:680pxMargin:20px auto}我们在domo中也用CSS3设置了提交按钮的样式，代码在本文中没有解释，大家可以下载代码了解一下。

jQuery

当我们点击页面输入框底部的笑脸，就会触发qqface表情插件，简单几行就搞定了。

$ (function () {$(')。情感’)。qqface ({assign :' saytext '，//assign path : ' face/'//'//存储表情符号的路径})；});选择表情图片后，输入框中会插入一个[em_5]等代码，代表插入的表情图片。在实际应用中，点击提交按钮后，该表情代码应与其他内容一起插入数据表。当页面显示时，我们应该用真实的图片替换表情符号代码，并将其显示在页面上。以下代码是插入表情图片，点击提交按钮，使用javascript自定义功能替换显示表情代码：

$(function(){ 0.$('.sub _ BTN’)。单击(function(){ var str=$('#saytext '))。val()；$('#show ')。html(replace _ em(str))；});});函数replace _ em(str){ str=str . replace(/\/g，'；');str=str.replace(/\/g，'；');str=str . replace(/\ n/g '；br/；');str=str . replace(/\[em _([0-9]*)\]/g，' img src=' http : face/$ 1 . gif ' border=' 0 '/')；返回字符串；}如果想用PHP代码定期替换表情符号，可以使用以下功能：

函数ubbReplace($ str){ $ str=str _ replace('，'；'，$ str)；$str=str_replace('，'；'，$ str)；$str=str_replace('\n '，'；br/；'，$ str)；$ str=preg _ replace('[\[em _([0-9]*)\]'，' img src=\'face/$1.gif\' /'，$ str)；返回$ str}以上内容是基于jQuery的QQ表情插件的详细介绍。希望你喜欢。