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;" οnmοuseοver="over(this);" οnmοuseοut="out(this);">
                        <img src="../images/face/face01.gif" οnclick="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

转载于:https://www.cnblogs.com/chhuic/archive/2010/01/07/1640965.html