哪位大神用过jquery.qqFace.js,我想把图中输入框里面的字符,变成对应的android 表情输入框,求指导,怎么弄

jquery.qqFace.js
脚本简介jQueryQQ表情插件qqFace是一款基于jQuery实现的QQ表情特效插件jquery.qqFace.js。主要代码如下&!doctypeh
js jquery图片放大效果&html xmlns="http://www.w3.org/1999/xhtml"&&head&&
如果你使用的是jQuery,它里面有一个内置的方法可以用来加载单个JS文件。当你需要延迟加载一些js插件或其它类型的文件时,可以使用这个方法。一、jQuery
今天介绍一款 jQuery 插件jqueryrotate,它可以实现旋转效果。jqueryrotate 支持所有主流浏览器,包括 IE6。
jquery-cookieplug.js怎么用,jquery-cookieplug.js的使用方法。1、使用语法$.cookie('the_cookie','the_value');设置cookie的...
Lazy Load.js是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到
对cookies的操作在当访问一个网站就无时无刻的都伴随着我们,记录着我们的一举一动,并将不危害用户隐私的信息,将以保存,这样用户就不用去从新再次操作重复的步骤
非常不错的jQuery图片裁剪插件CropZoom,功能非常强大,可以旋转图片,改变图片显示比例,拖拽到指定区域进行裁剪,裁剪及时显示裁剪图片效果,绝对能满足你
Flot一个纯javascript绘画库,基于jQuery开发。使用简单,有吸引力的外观和很好交互功能。它能够在客户端根据任何数据集快速生成图片。
Headroom.js是一个轻量级高性能的JS插件 ,响应用户鼠标滚动操作。弹出或隐藏顶部导航菜单。
现在各大网站上都有各种抽奖活动,今天带给大家一款jQuery抽奖插件希望对您有用。
jBar 是一个简单和轻量级 jQuery 通知栏,JBar 允许您创建简单的行动要求,使其用户可以查看在您的网站顶端的信息。用户可以通过单击功能区切换栏的可见
插件描述一个通过单击页面按钮,便实现页面打印的jQuery插件jqprint。
jQuery nstSlider.js 完全自定义的CSS,单/双手柄,触摸功能,IE7+兼容,自定义位四舍五入,非直线步进增量!
超酷JSjquery图片翻动展示效果S超酷图片翻动展示效果,根据鼠标进出图片的方向来控制图片进出的方式,效果超炫,兼容主流浏览器使用方法:1、head区域引用文
JQUERY全屏相册特效,js特效代码请从下面下载
Js获取IP地址,JS也可以获取客户端IP地址啦,大家知道JS不能跨域,所以这里借助了jquery,真的可以实现获取IP地址,代码如下,已通过测试:view s
对cookies的操作在当访问一个网站就无时无刻的都伴随着我们,记录着我们的一举一动,并将不危害用户隐私的信息,将以保存,这样用户就不用去从新再次操作重复的步骤
jquery——滚动条插件jscroll.js,jqueryjscroll.js一、效果如下点击“测试中奖纪录”弹出弹框。弹框中内容超出时显示滚动条。二、代码部
Scrollup是一款jQuery的“回到页面顶端”的插件,能够帮助你快速的实现一个完全自定义的“back to top"的功能。
Ideal forms,这个表单美化架构简单,基于jQuery框架,能够帮助web开发人员快速创建漂亮和界面友好的表单组件。
有些网页不想让用户使用右键,那就禁止吧,这是jquery禁止右键,js禁止右键的代码例子。
jquery.datepair是一个轻量级的jQuery插件,智能选择日期和时间范围,灵感来自于谷歌日历。
1.alertify插件功能主要实现提示功能,用于代替js中的alert,confirm,prompt,显示友好的提示框2.alertify使用方法1.使用的文
JQuery的ready函数与JS的onload的区别:1.执行时间window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。$(document).ready()是DOM结构绘制...
jqueryjs获取获得两个时间差,调取GetDateDiff(start,end,"day")/**获得时间差,时间格式为年-月-日小时:分钟:秒或者年/月/日小时:分钟:秒*其中,年月日为全格式,...西西软件下载最安全的下载网站、值得信赖的软件下载站!
→ javascript中字符串常用操作总结、JS字符串操作大全
类型:电子教程大小:9.5M语言:中文 评分:7.5
字符串的操作在js中非常频繁,也非常重要。以往看完书之后都能记得非常清楚,但稍微隔一段时间不用,便会忘得差不多,记性不好是硬伤啊。。。今天就对字符串的一些常用操作做个整理,一者加深印象,二者方便今后温习查阅。String对象属性(1) length属性length算是字符串中非常常用的一个属性了,它的功能是获取字符串的长度。当然需要注意的是js中的中文每个汉字也只代表一个字符,这里可能跟其他语言有些不一样。var&str&=&'abc';
console.log(str.length);(2) prototype属性prototype在面向对象编程中会经常用到,用来给对象添加属性或方法,并且添加的方法或属性在所有的实例上共享。因此也常用来扩展js内置对象,如下面的代码给字符串添加了一个去除两边空格的方法:String.prototype.trim&=&function(){
&&&&return&this.replace(/^\s*|\s*$/g,&'');
}String对象方法1.获取类方法(1) charAt()stringObject.charAt(index)charAt()方法可用来获取指定位置的字符串,index为字符串索引值,从0开始到string.leng C 1,若不在这个范围将返回一个空字符串。如:var&str&=&'abcde';
console.log(str.charAt(2));&&&&&//返回c
console.log(str.charAt(8));&&&&&//返回空字符串(2) charCodeAt()stringObject.charCodeAt(index)charCodeAt()方法可返回指定位置的字符的Unicode。charCodeAt()方法与charAt()方法类似,都需要传入一个索引值作为参数,区别是前者返回指定位置的字符的编码,而后者返回的是字符子串。var&str&=&'abcde';
console.log(str.charCodeAt(0));&&&&&//返回97(3) fromCharCode()String.fromCharCode(numX,numX,…,numX)fromCharCode()可接受一个或多个Unicode值,然后返回一个字符串。另外该方法是String 的静态方法,字符串中的每个字符都由单独的数字Unicode编码指定。String.fromCharCode(97,&98,&99,&100,&101)&&&//返回abcde2.查找类方法(1) indexOf()stringObject.indexOf(searchvalue,fromindex)indexOf()用来检索指定的字符串值在字符串中首次出现的位置。它可以接收两个参数,searchvalue表示要查找的子字符串,fromindex表示查找的开始位置,省略的话则从开始位置进行检索。var&str&=&'abcdeabcde';
console.log(str.indexOf('a'));&&//&返回0
console.log(str.indexOf('a',&3));&&&//&返回5
console.log(str.indexOf('bc'));&//&返回1(2) lastIndexOf()方法stringObject.lastIndexOf(searchvalue,fromindex)lastIndexOf()语法与indexOf()类似,它返回的是一个指定的子字符串值最后出现的位置,其检索顺序是从后向前。var&str&=&'abcdeabcde';
console.log(str.lastIndexOf('a'));&&//&返回5
console.log(str.lastIndexOf('a',&3));&&&//&返回0&从第索引3的位置往前检索
console.log(str.lastIndexOf('bc'));&//&返回6(3) search()方法stringObject.search(substr)&
stringObject.search(regexp)search()方法用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串。它会返回第一个匹配的子字符串的起始位置,如果没有匹配的,则返回-1。var&str&=&'abcDEF';
console.log(str.search('c'));&&&//返回2
console.log(str.search('d'));&&&//返回-1
console.log(str.search(/d/i));&&//返回3(4) match()方法stringObject.match(substr)&
stringObject.match(regexp)match()方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。如果参数中传入的是子字符串或是没有进行全局匹配的正则表达式,那么match()方法会从开始位置执行一次匹配,如果没有匹配到结果,则返回null。否则则会返回一个数组,该数组的第0个元素存放的是匹配文本,除此之外,返回的数组还含有两个对象属性index和input,分别表示匹配文本的起始字符索引和stringObject 的引用(即原字符串)。var&str&=&'1a2b3c4d5e';
console.log(str.match('h'));&&&&//返回null
console.log(str.match('b'));&&&&//返回[&b&,&index:&3,&input:&&1a2b3c4d5e&]
console.log(str.match(/b/));&&&&//返回[&b&,&index:&3,&input:&&1a2b3c4d5e&]如果参数传入的是具有全局匹配的正则表达式,那么match()从开始位置进行多次匹配,直到最后。如果没有匹配到结果,则返回null。否则则会返回一个数组,数组中存放所有符合要求的子字符串,并且没有index和input属性。var&str&=&'1a2b3c4d5e';
console.log(str.match(/h/g));&&&//返回null
console.log(str.match(/\d/g));&&//返回[&1&,&&2&,&&3&,&&4&,&&5&]3.截取类方法(1) substring()stringObject.substring(start,end)substring()是最常用到的字符串截取方法,它可以接收两个参数(参数不能为负值),分别是要截取的开始位置和结束位置,它将返回一个新的字符串,其内容是从start处到end-1处的所有字符。若结束参数(end)省略,则表示从start位置一直截取到最后。var&str&=&'abcdefg';
console.log(str.substring(1,&4));&&&//返回bcd
console.log(str.substring(1));&&//返回bcdefg
console.log(str.substring(-1));&//返回abcdefg,传入负值时会视为0(2) slice()stringObject.slice(start,end)slice()方法与substring()方法非常类似,它传入的两个参数也分别对应着开始位置和结束位置。而区别在于,slice()中的参数可以为负值,如果参数是负数,则该参数规定的是从字符串的尾部开始算起的位置。也就是说,-1 指字符串的最后一个字符。var&str&=&'abcdefg';
console.log(str.slice(1,&4));&&&//返回bcd
console.log(str.slice(-3,&-1));&//返回ef
console.log(str.slice(1,&-1));&&//返回bcdef
console.log(str.slice(-1,&-3));&//返回空字符串,若传入的参数有问题,则返回空(3) substr()stringObject.substr(start,length)substr()方法可在字符串中抽取从start下标开始的指定数目的字符。其返回值为一个字符串,包含从 stringObject的start(包括start所指的字符)处开始的length个字符。如果没有指定 length,那么返回的字符串包含从start到stringObject的结尾的字符。另外如果start为负数,则表示从字符串尾部开始算起。var&str&=&'abcdefg';
console.log(str.substr(1,&3))&&&//返回bcd
console.log(str.substr(2))&&//返回cdefg
console.log(str.substr(-2,&4))&&//返回fg,目标长度较大的话,以实际截取的长度为准4.其他方法(1) replace()方法stringObject.replace(regexp/substr,replacement)replace()方法用来进行字符串替换操作,它可以接收两个参数,前者为被替换的子字符串(可以是正则),后者为用来替换的文本。如果第一个参数传入的是子字符串或是没有进行全局匹配的正则表达式,那么replace()方法将只进行一次替换(即替换最前面的),返回经过一次替换后的结果字符串。var&str&=&'abcdeabcde';
console.log(str.replace('a',&'A'));
console.log(str.replace(/a/,&'A'));如果第一个参数传入的全局匹配的正则表达式,那么replace()将会对符合条件的子字符串进行多次替换,最后返回经过多次替换的结果字符串。var&str&=&'abcdeabcdeABCDE';
console.log(str.replace(/a/g,&'A'));&&&&//返回AbcdeAbcdeABCDE
console.log(str.replace(/a/gi,&'$'));&&&//返回$bcde$bcde$BCDE(2) split()方法stringObject.split(separator,howmany)split()方法用于把一个字符串分割成字符串数组。第一个参数separator表示分割位置(参考符),第二个参数howmany表示返回数组的允许最大长度(一般情况下不设置)。var&str&=&'a|b|c|d|e';
console.log(str.split('|'));&&&&//返回[&a&,&&b&,&&c&,&&d&,&&e&]
console.log(str.split('|',&3));&//返回[&a&,&&b&,&&c&]
console.log(str.split(''));&//返回[&a&,&&|&,&&b&,&&|&,&&c&,&&|&,&&d&,&&|&,&&e&]也可以用正则来进行分割var&str&=&'a1b2c3d4e';
console.log(str.split(/\d/));&//返回[&a&,&&b&,&&c&,&&d&,&&e&](3) toLowerCase()和toUpperCase()stringObject.toLowerCase()&
stringObject.toUpperCase()toLowerCase()方法可以把字符串中的大写字母转换为小写,toUpperCase()方法可以把字符串中的小写字母转换为大写。var&str&=&'JavaScript';
console.log(str.toLowerCase());&//返回javascript
console.log(str.toUpperCase());&//返回JAVASCRIPT
01-1201-0210-1605-2305-0304-1902-2501-1612-2512-10
阅读本文后您有什么感想? 已有23人给出评价!
名称大小下载我们在QQ聊天或者发表评论、微博时,会有一个允许加入表情的功能,点击表情按钮,会弹出一系列表情小图片,选中某个表情图片即可发表的丰富的含表情的内容。今天和大家分享一款基于jQuery的QQ表情插件,您可以轻松将其应用到你的项目中。
首先在html页面的head中引入jQuery库文件和QQ表情插件jquery.qqFace.js文件。
&type=&text/javascript&&src=&jquery-1.7.2.min.js&&&&type=&text/javascript&&src=&jquery.qqFace.js&&&
然后在body中加入以下html代码:
&id=&show&&&&class=&comment&&&&&&&&class=&com_form&&&&&&&&&&&&class=&input&&id=&saytext&&name=&saytext&&&&&&&&&&&&class=&emotion&表情&type=&button&&class=&sub_btn&&value=&提交&&&&&&&&&&&
页面中有一个输入框,用来输入要发表的内容,还有一个表情按钮,点击此按钮可以调用表情图片,完了就可以点击&提交&按钮发布带表情的内容了。
我们用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设置了提交按钮的样式,其代码在本文中不做解释,您可以下载代码了解下。
当我们点击页面输入框下方那个笑脸时,触发调用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&&&}&&
如果您想用代码来正则替换表情图片的话,可以使用以下函数:
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&$&&}&&
好了,本文讲解到此。
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)当前位置: >
一款基于jQuery的QQ表情表单插件
特效说明:
一款基于jQuery的QQ表情表单插件网页特效,点击QQ表情出现QQ黄脸表情,点击提交按钮显示所选表情,网站留言板表情、客户留言表情代码、QQ表情JS代码。(兼容测试:IE6及以上、Firefox、Chrome、Opera、Safari、360等主流浏览器)
使用方法:
1、调用JS插件代码:
&script type=&text/javascript& src=&/ajax/libs/jquery/1.8.3/jquery.min.js&&&/script&
&script type=&text/javascript& src=&jquery.qqFace.js&&&/script&
2、添加HTML代码:
将&!--效果html开始--&......&!--效果html结束--&之间的html和js代码;放在&body&&/body&之间。
3、JS参数设置代码:
&script type=&text/javascript&&
$(function(){
&& &$('.emotion').qqFace({
&& &&& &id : 'facebox', //表情盒子的ID
&& &&& &assign:'saytext', //给那个控件赋值
&& &&& &path:'face/'&& &//表情存放的路径
&& &$(&.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& /&');
一款消除QQ表情小游戏JS游戏源码,游戏说明:点击“开始游戏”,随机掉下QQ表情,点中它,千万别让它掉下去!!……
一组蜡笔小新QQ表情打包下载。包含:蜡笔小新泪奔、小新跳舞、小新游泳、小新小蜜蜂搞笑表情。……
最新更新特效
本站关键词
科e互联版权所有
京ICP备号-1基于jQuery的QQ神情插件 - Web前端当前位置:& &&&基于jQuery的QQ神情插件基于jQuery的QQ神情插件&&网友分享于:&&浏览:3次基于jQuery的QQ表情插件
首先在html页面的head中引入jQuery库文件和QQ表情插件jquery.qqFace.js文件。
type="text/javascript" src="jquery-1.7.2.min.js"
type="text/javascript" src="jquery.qqFace.js"
然后在body中加入以下html代码:
class="comment"
class="com_form"
class="input" id="saytext" name="saytext"
class="emotion"表情 type="button" class="sub_btn" value="提交"
页面中有一个输入框,用来输入要发表的内容,还有一个表情按钮,点击此按钮可以调用表情图片,完了就可以点击“提交”按钮发布带表情的内容了。
我们用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设置了提交按钮的样式,其代码在本文中不做解释,您可以下载代码了解下。
当我们点击页面输入框下方那个笑脸时,触发调用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" /&');
如果您想用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;
12345678910
12345678910
12345678910 上一篇:下一篇:文章评论相关解决方案 12345678910 Copyright & &&版权所有

我要回帖

更多关于 html5 输入框 qq表情 的文章

 

随机推荐