仿QQ表情的设计

在body中添加如下代码：

 

<textarea id="msgTxt"  title="微博输入框" name="msgTxt" ></textarea>
<div id="sendBox"><input type="button" class="sendBtn" id="fabu" value="" /></div>
<div  id="showPic"  />
<div id="funBox"><a href="javascript:void(0);" class="insertFace">表情</a></div>

在style中添加如下代码：

#funBox  a.insertFace

        {

            background-position: -170px -33px;

            display: inline-block;

            height: 16px;

            padding-left: 18px;

        }

 

在javascript中添加如下代码(使用jquery框架设计)：

 

<script type="text/javascript">
   $(function () { 
//实现QQ表情的功能
            var userFacesCn =['微笑','大笑','哭泣','再见','嘻嘻','招手','生气','牛'];
            var userFaces =['pic_1','pic_2','pic_3','pic_4','pic_5','pic_6','pic_7','pic_8'];
$("[class=insertFace]").click(function () {
          varheight = $(this).height();
          var top = $(this).offset().top+height;
          var left = $(this).offset().left;
                $("<div id='Userfaces'></div>").appendTo("#funBox");
                $("<div id='Userfaces'></div>").css({'top':top, 'left':left});
               
                $.each(userFacesCn, function (index,value) {
                    $("<img src='${ctx}/pms/weibo/faces/"+userFaces[index]+ ".gif  ' title="+ value + ">").css("cursor","pointer")
                        .appendTo("#Userfaces").click(function () {
                        $("#msgTxt").val($("#msgTxt").val()+ "["+ $(this).attr("title")+ "]");
                        });
              });
                //和上面的一样，如何判断一个用户是否单击了一个按钮
                $("#Userfaces").mouseleave(function () {
                    $("#Userfaces").remove();
                });
                //摆放位置
                $("#Userfaces").css("top",  $(this).offset().top + $(this).height + "px").css("left", $(this).offset().left + "px");
               });
 });
</script>

现在我们的任务已经做了一大半了，但是你会发现现在只能选择头像然后在textarea中显示比如：[微笑]  ，并没有显示头像呀。其实我们的头像显示在div id ="showPic" 区域中。

继续在javascript中添加如下代码：

$("#fabu").click(function(){
        	  var weiboContent=$("#msgTxt").val();
        	//将中文字改变为英文的图片名
        	  for(var i = 0; i < userFaces.length; i++){
        		  var reg00 = new RegExp("\\["+userFacesCn[i]+"\\]",'g');
        		  weiboContent = weiboContent.replace(reg00,"["+userFaces[i]+"]");
        	  }
               //对该数据进行处理 
        	reg =/\[(\S{5})\]/g;
        	weiboContent = weiboContent.replace(reg,"<img src='${ctx}/pms/weibo/faces/$1.gif'></img>");
        	
        	var re=/@(\S+)+(\s)?/g;
               weiboContent=weiboContent.replace(re,'<a class="marked-name" href="javascript://" rel="weiboAtem-username" name="$1" >@$1</a>');
              
            //现在来显示图片
              
              $("#showPic").html(weiboContent);

        });

效果如下：

我参考的源代码大家可以在： http://vdisk.weibo.com/s/gVbt3  下载