前台介绍了《c# 类似于QQ表情弹出框功能的二种实现方法 》 ，这时是介绍C#在C/S下的实现办法，现在来说说B/S下的实现办法。该代码与前面的时为了实现C/S与B/S相互发送表情，实现通信的。
B/S下实现相对于C/S下实现表情相对比较简单，主要是用一个页面和一个脚本文件。和前面一样，先贴出实现效果：
从上面看到，可以加裁图片，也可以把图片插入到消息框中，并且当鼠标放在表情上时会看到其提示消息。
下面来说下具体的实现过程
首先建立 一个页面，页面里包括所有的表情。如果所示：
FaceSheet.aspx（代码下载）
贴出其中一个表情的TD
<td bgcolor="#ffffff" style="cursor: hand;" onmouseover="over(this);" onmouseout="out(this);">
<img src="../images/face/face01.gif" onclick="selface(this)" width="20" height="20" alt="微笑 :)" />
</td>
这里定义 了onmouseover、onmouseout和onclick事件。onclick事件是为了失败当点击表情时把该表情插入到消息框，是通过脚本实现，脚本如下：
代码
function over(obj) {
obj.style.background = "#ffaa00";
}function out(obj) {
obj.style.background = "#FFFFFF";
}
function selface(obj) {
parent.InsertFace(obj); //插入表情
parent.HideFaceSheet(); //隐藏表情框
}
插入表情到消息框的实现方法：
代码
// 函数： InsertFace
// 参数： obj
// 功能： 表情
function InsertFace(obj) {
var imgpath = obj.src;
var imgalt = obj.alt;
var txtEdit = $('#txtEdit');
var strHtml = "<img src='" + imgpath + "' alt='" + imgalt + "'/>";
var msg = $('#txtEdit').html();
txtEdit.html(msg + strHtml);
txtEdit.focus();
}
这里要用到JQuery。因为消息框是一个textarea控件，要输入HTML代码。
以上是主要的代码，整个项目的源代码可以从这里下载。 QQFaceWeb
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。