基于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 相关文章推荐
IE中jscript/javascript的条件编译
Sep 07 Javascript
比较全的JS checkbox全选、取消全选、删除功能代码
Dec 19 Javascript
JavaScript中的立即执行函数表达式介绍
Mar 15 Javascript
jQuery Ajax调用WCF服务详细教程
Mar 31 Javascript
Javascript中的作用域和上下文深入理解
Jul 03 Javascript
jquery实现列表上下移动功能
Feb 25 Javascript
jquery 无限极下拉菜单的简单实例(精简浓缩版)
May 31 Javascript
jquery获取input type=text中的值的各种方式(总结)
Dec 02 Javascript
通过AngularJS实现图片上传及缩略图展示示例
Jan 03 Javascript
Vue render深入开发讲解
Apr 13 Javascript
在vue项目中引入高德地图及其UI组件的方法
Sep 04 Javascript
vue实现div可拖动位置也可改变盒子大小的原理
Sep 16 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网站提速三大“软”招
2006/10/09 PHP
供参考的 php 学习提高路线分享
2011/10/23 PHP
PHP.ini中配置屏蔽错误信息显示和保存错误日志的例子
2014/05/12 PHP
php超快高效率统计大文件行数
2015/07/05 PHP
PHP实现删除字符串中任何字符的函数
2015/08/11 PHP
PHP中获取文件创建日期、修改日期、访问时间的方法
2016/11/05 PHP
javascript中Date()函数在各浏览器中的显示效果
2015/06/18 Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
2015/12/07 Javascript
如何利用Promises编写更优雅的JavaScript代码
2016/05/17 Javascript
JS获取多维数组中相同键的值实现方法示例
2017/01/06 Javascript
Nodejs之http的表单提交
2017/07/07 NodeJs
vue-router之nuxt动态路由设置的两种方法小结
2018/09/26 Javascript
react-router4按需加载(踩坑填坑)
2019/01/06 Javascript
微信小程序 slot踩坑的解决
2019/04/01 Javascript
vue项目添加多页面配置的步骤详解
2019/05/22 Javascript
基于javascript实现贪吃蛇经典小游戏
2020/04/10 Javascript
ES6 class类链式继承,实例化及react super(props)原理详解
2020/02/15 Javascript
在Docker上部署Python的Flask框架的教程
2015/04/08 Python
介绍Python中几个常用的类方法
2015/04/08 Python
自动化Nginx服务器的反向代理的配置方法
2015/06/28 Python
Python编程argparse入门浅析
2018/02/07 Python
python+ffmpeg视频并发直播压力测试
2018/03/06 Python
Pycharm 设置自定义背景颜色的图文教程
2018/05/23 Python
Python实现的微信好友数据分析功能示例
2018/06/21 Python
python opencv实现切变换 不裁减图片
2018/07/26 Python
不到20行代码用Python做一个智能聊天机器人
2019/04/19 Python
python实现在cmd窗口显示彩色文字
2019/06/24 Python
HTML5移动端开发中的Viewport标签及相关CSS用法解析
2016/04/15 HTML / CSS
培训主管的岗位职责
2013/11/23 职场文书
党员群众路线教育实践活动学习笔记
2014/11/05 职场文书
宾馆前台接待岗位职责
2015/04/02 职场文书
给朋友的赠语
2015/06/23 职场文书
2019大学生实习报告
2019/06/21 职场文书
js基础语法与maven项目配置教程案例
2021/07/15 Javascript
Go 通过结构struct实现接口interface的问题
2021/10/05 Golang
mysql的数据压缩性能对比详情
2021/11/07 MySQL