基于jQuery实现的QQ表情插件


Posted in Javascript onAugust 25, 2015

不废话了,先给大家展示效果图:

基于jQuery实现的QQ表情插件

查看演示 下载源码

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

HTML

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

<script type="text/javascript" src="jquery-1.7.2.min.js"></script> 
<script type="text/javascript" src="jquery.qqFace.js"></script>

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

<div id="show"></div> 
<div class="comment"> 
 <div class="com_form"> 
  <textarea class="input" id="saytext" name="saytext"></textarea> 
  <p><span class="emotion">表情</span><input type="button" class="sub_btn" value="提交"></p> 
 </div> 
</div>

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

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(/\</g,'<;'); 
 str = str.replace(/\>/g,'>;'); 
 str = str.replace(/\n/g,'<;br/>;'); 
 str = str.replace(/\[em_([0-9]*)\]/g,'<img src="face/$1.gif" border="0" />'); 
 return str; 
}

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

function 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); 
 return $str; 
}

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

Javascript 相关文章推荐
JS对话框_JS模态对话框showModalDialog用法总结
Jan 11 Javascript
jQuery实现简单滚动动画效果
Apr 07 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
Sep 04 Javascript
Angular2 环境配置详细介绍
Sep 21 Javascript
Node.js简单入门前传
Aug 21 Javascript
javascript input输入框模糊提示功能的实现
Sep 25 Javascript
ES6 javascript的异步操作实例详解
Oct 30 Javascript
如何重置vue打印变量的显示方式
Dec 06 Javascript
使用JS实现导航切换时高亮显示的示例讲解
Aug 22 Javascript
koa源码中promise的解读
Nov 13 Javascript
JavaScript使用类似break机制中断forEach循环的方法
Nov 13 Javascript
vue框架制作购物车小球动画效果实例代码
Sep 26 Javascript
js中javascript:void(0) 真正含义
Nov 05 #Javascript
js实现三张图(文)片一起切换的banner焦点图
Aug 25 #Javascript
js焦点文字滚动效果代码分享
Aug 25 #Javascript
JS实现灵巧的下拉导航效果代码
Aug 25 #Javascript
基于jQuery实现仿百度首页换肤背景图片切换代码
Aug 25 #Javascript
jQuery实现类似标签风格的导航菜单效果代码
Aug 25 #Javascript
jQuery下拉美化搜索表单效果代码分享
Aug 25 #Javascript
You might like
PHP中的cookie
2006/11/26 PHP
PHP+MySQL 手工注入语句大全 推荐
2009/10/30 PHP
php计算两个日期时间差(返回年、月、日)
2014/06/19 PHP
curl 出现错误的调试方法(必看)
2017/02/13 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
js 格式化时间日期函数小结
2010/03/20 Javascript
把input初始值不写value的具体实现方法
2013/07/04 Javascript
JS格式化数字金额用逗号隔开保留两位小数
2013/10/18 Javascript
JS判断移动端访问设备并加载对应CSS样式
2014/06/13 Javascript
jQuery分别获取选中的复选框值的示例
2014/06/17 Javascript
jQuery无缝轮播图代码
2016/12/22 Javascript
angular+ionic 的app上拉加载更新数据实现方法
2017/01/16 Javascript
深入理解js中的加载事件
2017/02/08 Javascript
jackson解析json字符串,首字母大写会自动转为小写的方法
2017/12/22 Javascript
基于node搭建服务器,写接口,调接口,跨域的实例
2018/05/13 Javascript
vue加载完成后的回调函数方法
2018/09/07 Javascript
React降级配置及Ant Design配置详解
2018/12/27 Javascript
vue-router源码之history类的浅析
2019/05/21 Javascript
WebSocket的简单介绍及应用
2019/05/23 Javascript
针对Vue路由history模式下Nginx后台配置操作
2020/10/22 Javascript
[55:25]VGJ.T vs Optic Supermajor小组赛D组 BO3 第三场 6.3
2018/06/04 DOTA
python标准算法实现数组全排列的方法
2015/03/17 Python
Python2.7实现多进程下开发多线程示例
2019/05/31 Python
Numpy中对向量、矩阵的使用详解
2019/10/29 Python
使用Python和百度语音识别生成视频字幕的实现
2020/04/09 Python
Keras自定义实现带masking的meanpooling层方式
2020/06/16 Python
Python把图片转化为pdf代码实例
2020/07/28 Python
Python爬虫抓取论坛关键字过程解析
2020/10/19 Python
Python实现对word文档添加密码去除密码的示例代码
2020/12/29 Python
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
2014/12/30 HTML / CSS
求职者简历中的自我评价
2013/10/20 职场文书
社区个人对照检查材料(群众路线)
2014/09/26 职场文书
女儿满月酒致辞
2015/07/29 职场文书
《圆的周长》教学反思
2016/02/17 职场文书
Mysql使用全文索引(FullText index)的实例代码
2022/04/03 MySQL
nginx实现多geoserver服务的负载均衡
2022/05/15 Servers