asp.net类似于QQ表情弹出框功能的实现方法

    前台介绍了《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