qq表情左右滑动php,基于jQuery实现的QQ表情插件_jquery
不废话了,先给大家展示效果图:
我们在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(/\/g,'>;');
str = str.replace(/\n/g,';');
str = str.replace(/\[em_([0-9]*)\]/g,'
');
return str;
}
如果您想用PHP代码来正则替换表情图片的话,可以使用以下函数:
function ubbReplace($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表情插件的详细介绍,希望大家喜欢。
本文原创发布php中文网,转载请注明出处,感谢您的尊重!
qq表情左右滑动php,基于jQuery实现的QQ表情插件_jquery相关推荐
- 基于JQuery 编写轮播图插件
基于JQuery 编写轮播图插件 不管是实际开发还是平时的小项目中 ,页面一定有且多个的轮播图,那么为了效率大家可以考虑封装这样的小插件.下面一起看看他的使用方法吧 使用需要准备(往下滑动会看到): ...
- 基于jQuery的表单验证插件:jValidate
网上基于jQuery的表单验证插件已有很多,但是这个轮子我还是继续做一个,因为这个表单验证插件是从我以前的个人JS框架移值过来的(我已慢慢投入jQuery的怀抱),并且它的验证规则书写方式也许会让你眼 ...
- div alert html,基于jQuery的弹出消息插件 DivAlert之旅(一)
想着自己学习Javascript,以及Ajax.jQuery等已经有一段时间了,不过貌似还没有写过一个插件,看到jQuery官网上那么多令人眼前一亮的插件,自己今天也动心说是不是能够写一个类似的插件来 ...
- 推荐20款基于 jQuery CSS 的文本效果插件
jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...
- 基于jquery的锚点滚动插件(百度百科效果) anchorScroll.js
1.插进使用场景 请打开https://baike.baidu.com/item/日本动画#hotspotmining,查看百度百科页面效果. 2.插件源代码(更新 2017-08-28): jQue ...
- 设置网页便签 html5,基于jQuery的页面便签插件
color-sticker是一款基于jQuery的页面便签插件.它是一个可以任意拖拽,保存,删除,导入和定制颜色的页面便签插件.主要的功能点有以下几点: 点击右上方的蓝色+按钮,可以在页面中添加一个便 ...
- 有用facs做计算机表情识别的嘛,基于肌肉运动的人脸表情识别-计算机应用技术专业论文.docx...
基于肌肉运动的人脸表情识别-计算机应用技术专业论文 中文摘要情感计算,是未来计算机领域发展的一个重要方向,是让计算机可以了解人 的情感和情绪,并且能够以带有感情的方式与人进行交互.而最简单也是最直接 ...
- 基于jQuery的表单验证插件Validation Engine
Validation Engine是一款基于Jquery的js表单验证插件.相对于之前的传统表单验证工具,其优点是自定义验证内容更广泛以及与AJAX的方便整合. 附件提供了该插件,解压密码为:im48 ...
- html图片点击左右滑动效果,基于jquery实现点击左右按钮图片横向滚动
点击左右按钮图片横向滚动jquery,一次滚动四个,图片滚动完成,自动回到第一个版面: 效果图如下: 点击左右按钮图片横向滚动 * { margin:0; padding:0;} body { fon ...
- 基于jquery,bootstrap数据验证插件bootstrapValidator 教程
ootstrap:能够增加兼容性的强大框架. 因为项目需要数据验证,看bootstrapValidator 还不错,就上手一直,完美兼容,话不多说. 需要引用css: bootstrap.min.cs ...
最新文章
- 测试结果分析_9种国内外纺织品耐摩擦色牢度测试方法结果分析
- linux修改主机名+免密认证+关闭防火墙
- vue-manage-system 后台管理系统开发总结
- python的一些基本语法
- caffe blob操作
- python把浮点数转换成16进制_Python将colorsys RGB坐标转换为十六进制
- centos python_在centos上配置python的虚拟开发环境
- libevent cs
- 一步一步带你实现自定义圆形进度条(详解)
- div+css实现盖章
- 函的红头文件格式制作_如何利用Word“智能函头”简单制作“红头文件”公文模板...
- ​在家共享按摩椅“掘金”共享经济
- amigo幸运字符什么意思_无线网络ssid是什么意思(全面解析SSID涵义)
- C语言面试题 - static的使用
- Linux命令基础入门
- Delphi7 To Delphi XE的变化
- 记录一下在上海考驾照经历
- 淮南师范学院计算机是几本,淮南师范学院是几本 是一本还是二本
- 计算机网络llc是什么,计算机网络原理自考2015年10月真题
- 仿微信在对话框文字中插入Emoji表情包