js333 > 计算机互联网 > 0中使用JQuery的fancybox实现便签式留言板,js表情转

原标题:0中使用JQuery的fancybox实现便签式留言板,js表情转

浏览次数:56 时间:2019-11-06

将jquery.qqFace.js表情转换成微信的字符码,

jquery.qqFace.js使用方法

引用

<script src="~/Content/qqFace/js/jquery.qqFace.js?v=3"></script>
<script src="~/Content/qqFace/js/jquery-browser.js"></script>

html

<div>

我自己拼的字符码,按照上面表情的顺序组合的,有的没找到吗直接用微信的文字表示,微信发出去收到的也可以转换成表情

 private string emoij = "/::);/::~;/::B;/::|;/::<;/::$;/::X;/::Z;/::’(;/::-|;/::@;/::P;/::D;/::O;/::(;/:–b;/::Q;/::T;/:,@P;/:,@-D;/::d;/:,@o;/::g;/:|-);/::!;/::L;/::>;/::,@;/:,@f;/::-S;/:?;/:,@x;/:,@@;/::8;/:,@!;/:xx;/:bye;/:wipe;/:dig;/:&-(;/:B-);/:<@;/:@>;/::-O;/:>-|;/:P-(;/::’|;/:X-);/::*;/:@x;/:8*;[拥抱];[月亮];[太阳];[炸弹];/:!!!;/:pd;/:pig;/:<W>;/:coffee;/:eat;/:heart;[强];[弱];[握手];[胜利];[抱拳];[勾引];[OK];[NO];/:rose;/:fade;/:showlove;[跳跳];[转圈]";

 

var emoijarray = emoij.Split(';');
int len = emoijarray.Length;
for (int i = 0; i < len; i++)
{
string str = string.Format("<img src={0}/Content/qqFace/arclist/{1}.gif{2} border={3}0{4}>",'"',i+1, '"', '"', '"');
if (xmlstr.Contains(str))//查找发送的文本消息中是否含有表情图片标签,有的话替换成对应的字符码,或许大家有更好的方式替换,我这只是循环去查找匹配的替换
{
xmlstr = xmlstr.Replace(str, emoijarray[i]);
}
}

这是微信上就可以收到表情了

jquery.qqFace.js使用方法 引用 script src="~/Content/qqFace/js/jquery.qqFace.js?v=3"/script script src="~/Content/qqFac...

<script src="~/Content/qqFace/js/jquery.qqFace.js?v=3"></script>
<script src="~/Content/qqFace/js/jquery-browser.js"></script>

采用JQuery的fancybox实现便签留言板。

});
原来的jQuery.qqface.js有下面这个方法

script.js:所有的js操作(拖动),添加留言等

str = str.replace(/</g, '<');

add_note.html:弹出层内容

$('.emotion').qqFace({
id: 'facebox',
assign: 'saytext', //给输入框赋值
path: '/Content/qqFace/arclist/' //表情图片存放的路径
});

2.解压,放到你的项目中,然后修改文件styles.css,jquery.fancybox-1.2.6.css,将里面的css图片路径换成你自己的路径

str = str.replace(/[em_([0-9]*)]/g, '<img src="/Content/qqFace/arclist/$1.gif" border="0" />');

@{
ViewBag.Title = "xxx";
Layout = "~/Views/Shared/_Layout.cshtml";
Random x = new Random(DateTime.Now.Millisecond);@*便签位置随机*@
}
@section head {
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<div style="width:50px;height:30px;margin-top:3px;text-align:center;line-height:30px;border-right:1px solid #dee5e7"><img src="~/Content/emoji.png" class="emotion" /></div>
<textarea class="input" id="saytext" name="saytext" style="display:none"></textarea>

3.页面使用,新建一个cshtml页面,代码如下

 

关于fancybox的使用,我已经全封装到文件夹中了,看如何使用呢?

 

jquery.fancybox.*:fancybox固定库,一般不需要改动。

jquery.qqFace.js使用方法

图片 1

图片 2

关于fancybox的介绍请参看:

这是微信上就可以收到表情了

  @*引用必要的库文件*@
<link rel="stylesheet" type="text/css" href="/Content/fancybox/styles.css"/>
<link rel="stylesheet" type="text/css" href="/Content/fancybox/jquery.fancybox-1.2.6.css" media="screen"/>
  <script src="/Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>  

function replace_em(str) {

@model IList<Model.customerheart>

我自己拼的字符码,按照上面表情的顺序组合的,有的没找到吗直接用微信的文字表示,微信发出去收到的也可以转换成表情

引用

  <script src="/Scripts/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/Content/fancybox/jquery.fancybox-1.2.6.pack.js"></script>
<script type="text/javascript" src="/Content/fancybox/script.js" charset="uft-8"></script>
}

}

demo:

$("#show").append(replace_em(str));
$("#saytext").val('');

我的广告单元,有空点一下哦,谢谢!

 private string emoij = "/::);/::~;/::B;/::|;/::<;/::$;/::X;/::Z;/::’(;/::-|;/::@;/::P;/::D;/::O;/::(;/:–b;/::Q;/::T;/:,@P;/:,@-D;/::d;/:,@o;/::g;/:|-);/::!;/::L;/::>;/::,@;/:,@f;/::-S;/:?;/:,@x;/:,@@;/::8;/:,@!;/:xx;/:bye;/:wipe;/:dig;/:&-(;/:B-);/:<@;/:@>;/::-O;/:>-|;/:P-(;/::’|;/:X-);/::*;/:@x;/:8*;[拥抱];[月亮];[太阳];[炸弹];/:!!!;/:pd;/:pig;/:<W>;/:coffee;/:eat;/:heart;[强];[弱];[握手];[胜利];[抱拳];[勾引];[OK];[NO];/:rose;/:fade;/:showlove;[跳跳];[转圈]";

1.首先下载文件夹

$(function () {

照旧先看效果图:

 

<div class="submain">
<div id="main">
<a id="addButton" class="green-button" href="/Content/fancybox/add_note.html">.我要评论.</a>
@foreach (Model.customerheart msg in Model)
{
<div class="note @msg.color" style="left:@x.Next(5,800)px; top:@x.Next(5,550)px; z-index:@x.Next(0,10)">
@msg.cheart
<div class="author">@msg.cname</div>
</div>
}
</div>
</div>

//修改原来js
var str = $("#saytext").val().trim();

图片 3

初始化

4.文件介绍

将表情转换成微信字符码,因为做微信自动回复时回复文本消息不能回复文字加图片,所以我对照网上的数据,将表情图片一一对应的字符码找出来

var emoijarray = emoij.Split(';');
int len = emoijarray.Length;
for (int i = 0; i < len; i++)
{
string str = string.Format("<img src={0}/Content/qqFace/arclist/{1}.gif{2} border={3}0{4}>",'"',i+1, '"', '"', '"');
if (xmlstr.Contains(str))//查找发送的文本消息中是否含有表情图片标签,有的话替换成对应的字符码,或许大家有更好的方式替换,我这只是循环去查找匹配的替换
{
xmlstr = xmlstr.Replace(str, emoijarray[i]);
}
}

0中使用JQuery的fancybox实现便签式留言板,js表情转换成微信的字符码。点击表情会把表情转换成图片保存到$("#saytext")里,我自己修改一下将表情在我们需要显示地方显示出来

html

str = str.replace(/n/g, '<br/>');

return str;

str = str.replace(/>/g, '>');

本文由js333发布于计算机互联网,转载请注明出处:0中使用JQuery的fancybox实现便签式留言板,js表情转

关键词:

上一篇:没有了

下一篇:没有了