qq表情包html插件,jQuery QQ表情插件jquery.qqFace.js
插件描述:一款基于jQuery的QQ表情特效插件
2016-3-23下载文件修改更新
/*更新说明
由于jquery 1.9.0 以上版本 jquery去掉了对 $.browser 的支持,采用$.support 来判断浏览器类型。导致之前的很多插件报错
我们采取的思路是使用jquery的继承机制对jquery 1.11.1版本进行扩展 使其支持 $.browser 方法,已达到兼容之前组件的目的.
下载文件中加入了jquery-browser.js,低于jquery 1.9.0版本的用户可以不调用!感谢网友(全?剿)提供。
*/
我们在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(/
/g,';');
str = str.replace(/[em_([0-9]*)]/g,'');
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]*)\]]", "", $str );
return $str;
}
qq表情包html插件,jQuery QQ表情插件jquery.qqFace.js相关推荐
- 朋友圈终于能斗表情包了,会发表情包您就多发点!
全世界只有3.14 % 的人关注了 青少年数学之旅 今日,微信ios端更新至7.0.9版本,又上了一次微博热搜. 版本新增了朋友圈图片评论功能,动态图.静态图均可,点击图片评论即可查看大图,评论图片同 ...
- 自制表情包!android,diy表情包制作软件下载-diy表情包 安卓版v2.6.0-PC6安卓网
diy表情包app是一款表情包制作软件,diy表情包制作软件精选大量无字表情包模板且可添加个人图片,diy表情包软件为你打造专属于你自己的魔性表情包! 软件介绍 手机qq表情包diy可以在大量自带的表 ...
- 熊猫人表情包python 代码_Python实现表情包的代码实例
本文主要介绍了使用Python进行简单图像处理的方法以及Python自动生产表情包的实例,具有很好的参考价值,下面跟着小编一起来看下吧 作为一个数据分析师,应该信奉一句话--"一图胜千言&q ...
- 【博客表情包】emoji和符号表情包
[博客表情包]emoji和符号表情包 带图网站 博客使用 常见的心心 符号表情 感谢大家的博客,让我发现了很多有趣的技术,欢迎各位大佬在评论区补充~ 看到有的大佬博客标题带有
- 计算机国二表情包,哈哈哈!设计师专用表情包合集(二)
编者按:设计师专用表情包第二弹来了!作为一名高贵冷艳的设计师,经常会遇到各种尴尬的状况.美丫姐特制一打设计师专用表情,专治奇葩甲方. 一. 设计师万能表情包 举个例子,普通情况下,有朋友找你做Logo ...
- 网赚项目:表情包项目之抖音表情包的流量变现模式
现在的年轻人都喜欢表情包,这就衍生出了不错的项目.今天萃见就和大家来聊聊痘印表情包如何流量变现. 表情包项目门槛低,低到人人都可以操作.门槛低,做的人就多,做的人多,竞争就大.容易做,做的人就多,做的 ...
- 教你用Python爬取表情包网站下的全部表情图片
教你用Python爬取表情包网站下的全部表情图片 又是我啦~~~ 最近上网的时候老看到有人用Python爬取表情包,心痒痒自己也整了一个. 使用到的扩展库:BeautifulSoup, request ...
- 对方接住了你人的php,接住你了表情包 - 接住你了微信表情包 - 接住你了QQ表情包 - 发表情 fabiaoqing.com...
接住你了_接住表情 接住你的爱哦_接住表情 对方接住你抛出的异常,并完美解决_接住_抛出_完美_对方_异常表情 来呀!我会接住你的(喵星人表情包)_喵星人_接住_我会表情 Lan 接住你的爱_lan_ ...
- python保存表情包_Python BeautifulSoup抓取表情包并保存
完美解决斗图表情包不够的状况: # -* - coding: UTF-8 -* - #导入第三方库 import urllib from bs4 import BeautifulSoup import ...
- Python爬虫爬取表情包+Autojs微信自动导入表情包脚本(附源码)
废话不多说直接开始 Python爬取表情包 一.检查网页源码 发现可以找到图片地址,直接请求图片地址下载图片 二.打开开发者工具(F12) 通过xpath提取p标签下的img标签src属性为图片地址 ...
最新文章
- 09、redis哨兵的多个核心底层原理的深入解析(包含slave选举算法)
- ASP.NET Core 跨平台图形验证码实现
- 机器学习时显卡频率莫明其妙的降低了?
- 没有可用软件包 docker-compose。_R语言CRAN软件包Meta分析
- 化学人学python有前途吗-转载:python之蟒开启理论计算化学的新时代
- Key-Value Coding (KVC)
- Scala:访问修饰符、运算符和循环
- axure后台示例_【Axure电商案例】如何设计和真的后台一样给客户看
- jQuery als.js 跑马灯
- m序列生成方法及其fpga实现
- 三款免费好用的Gif录屏神器
- Unity实时全局光照和烘焙全局光照 Unity2019
- 电子商务类网站CDN加速方案
- 新知实验室 TRTC在线上教育场景中的一种应用实践
- Python列表/元组/字典/集合详解
- 图像识别 常用数据集
- 非对称加密之公钥密码体系 【五】
- APP移动应用测试策略与工具思维导图
- 大数据分析师常见的面试题解答
- 数学之路-SPSS备忘(1)