qq表情包html插件,基于jQuery实现的QQ表情插件

àì夳堔傛蜴生んèń 2022-10-06 13:50 334阅读 0赞

不废话了，先给大家展示效果图：

![b966c8e5d5b13b29eb25cc82b7d0f20c.gif][]

我们在QQ聊天或者发表评论、微博时，会有一个允许加入表情的功能，点击表情按钮，会弹出一系列表情小图片，选中某个表情图片即可发表的丰富的含表情的内容。今天和大家分享一款基于jQuery的QQ表情插件，您可以轻松将其应用到你的项目中。

HTML

首先在html页面的head中引入jQuery库文件和QQ表情插件jquery.qqFace.js文件。

然后在body中加入以下html代码：

表情

页面中有一个输入框，用来输入要发表的内容，还有一个表情按钮，点击此按钮可以调用表情图片，完了就可以点击“提交”按钮发布带表情的内容了。

CSS

我们用CSS来美化页面，关键是表情按钮图片span.emotion的鼠标滑上与移开效果，以及调用表情插件后，显示的表情.qqFace面板效果，请看代码:

.comment\{width:680px; margin:20px auto; position:relative\}

.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\}

span.emotion\{width:42px; height:20px; background:url(icon.gif) no-repeat 2px 2px;

padding-left:20px; cursor:pointer\}

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:680px; margin:20px auto\}

我们在domo中还用CSS3设置了提交按钮的样式，其代码在本文中不做解释，您可以下载代码了解下。

jQuery

当我们点击页面输入框下方那个笑脸时，触发调用qqface表情插件，简单几行就搞定。

$(function()\{

$('.emotion').qqFace(\{

assign:'saytext', //给输入框赋值

path:'face/' //表情图片存放的路径

\});

...

\});

当选择表情图片后，输入框中会插入一段如\[em\_5\]之类的代码，代表插入的表情图片，实际应用中，点提交按钮后应该将这段表情代码连同其他内容插入到数据表中。而在页面显示的时候，我们应该将表情代码替换成真正的图片显示在页面上。下面的代码是插入表情图片后，点击提交按钮，使用javascript自定义函数将表情代码替换并显示：

$(function()\{

...

$(".sub\_btn").click(function()\{

var str = $("\#saytext").val();

$("\#show").html(replace\_em(str));

\});

\});

function replace\_em(str)\{

str = str.replace(/\\

str = str.replace(/\\>/g,'>；');

str = str.replace(/\\n/g,'；');

str = str.replace(/\\\[em\_(\[0-9\]\*)\\\]/g,'![%241.gif][241.gif]');

return str;

\}

如果您想用PHP代码来正则替换表情图片的话，可以使用以下函数：

function ubbReplace($str)\{

$str = str\_replace(">",'

$str = str\_replace(">",'>；',$str);

$str = str\_replace("\\n",'>；br/>；',$str);

$str = preg\_replace("\[\\\[em\_(\[0-9\]\*)\\\]\]",">img src=\\"face/$1.gif\\" />",$str);

return $str;

\}

以上内容就是本文对基于jQuery实现的QQ表情插件的详细介绍，希望大家喜欢。

[b966c8e5d5b13b29eb25cc82b7d0f20c.gif]: /images/20221005/3e0143f67180481d84a007a3ede202f3.png
[241.gif]:

发表评论取消回复

表情：

评论列表（有 0 条评论，334人围观）

还没有评论，来说两句吧...

相关阅读

相关 QQ表情包，动态的那种

QQ 表情包，动态的那种。做个 H5 版本的智能咨询，用到 qq 的表情包，被腾讯的产品经理鄙视了一顿，嫌弃有点模糊。嫌弃也就算了，你们自己自家的东西，又不提供一套来。

快来打我*/ 2023年07月13日 03:22/ 0 赞/ 59 阅读

相关 WORDPRESS QQ扫码登录插件

下载地址：[https://www.wuzhixiang.cn/index.php/2020/01/28/wordpress-qqlogin/][https_www.wuzhi

叁歲伎倆/ 2023年07月02日 10:25/ 0 赞/ 114 阅读

相关 Java邮件发送插件（基于QQ邮箱的使用）

> 该插件是基于SpringBoot2.x版本的 1. 导入相应的依赖 <dependency> <groupId>org.springframewor

青旅半醒/ 2023年02月20日 10:56/ 0 赞/ 184 阅读

相关 qq表情包html插件,基于jQuery实现的QQ表情插件

不废话了，先给大家展示效果图： ![b966c8e5d5b13b29eb25cc82b7d0f20c.gif][] 我们在QQ聊天或者发表评论、微博时，会有一个允许加入表情

àì夳堔傛蜴生んèń/ 2022年10月06日 13:50/ 0 赞/ 335 阅读

相关 html的阅读插件,HTML 插件

HTML 插件插件的功能是扩展 HTML 浏览器的功能。 HTML 助手(插件) 辅助应用程序(helper application)是可由浏览器启动的程序。辅助应用程

客官°小女子只卖身不卖艺/ 2022年10月05日 13:50/ 0 赞/ 262 阅读

相关 JQuery插件获取URL插件

JQuery插件获取URL中GET请求参数 / JQuery插件：获取浏览器GET参数请求，返回一个数组 @author NICK @date 2016/0

我就是我/ 2022年07月17日 02:20/ 0 赞/ 401 阅读

相关 jquery 消息插件--仿QQ消息弹出提醒

做网站时要实现一个功能，就是定时刷新由客人自己下的在线预定订单，然后提醒她们及时处理，正好jquery.messager.js可以帮我们轻松实现此功能，通过定时查询数据库记录，

短命女/ 2022年07月15日 10:16/ 0 赞/ 172 阅读

相关用javascript写一个emoji表情插件

概述以我们写的这个emoji插件为例，网上已经有一些相关的插件了，但你总感觉有些部分的需求不能被满足（如：可以自行添加新的表情包而不用去改源代码等等）详细

本是古典何须时尚/ 2022年05月31日 08:20/ 0 赞/ 282 阅读

相关基于jQuery编写插件

写在前面：相信很多使用过框架的人都不会再想着用jQuery库去找选择器，对DOM树进行复杂的操作了吧，但是用jQuery去扩展插件和方法还是很有用途的，最起码对自己的编

电玩女神/ 2022年05月28日 03:36/ 0 赞/ 217 阅读

相关 html pdf jquery插件

GitHub地址：[https://github.com/malsup/media/tree/master][https_github.com_malsup_media_tre

痛定思痛。/ 2022年04月17日 03:52/ 0 赞/ 207 阅读