前提：/Public/Biaoqing/Face/     下存表情圖片：eg:1.gif。預設有75個表情，每行15個

1.Html：

載入：

<script type="text/javascript" src="__PUBLIC__/Js/jquery.js"></script><!-- 測試用的jquery1.3.2  -->

<link href='__PUBLIC__/Biaoqing/Css/say.css' type='text/css' rel='stylesheet'/>

觸發：

<textarea name="content"  id="textareaComment" placeholder="歡迎對文章中進行點評，具備參考價值的評論對別人更有幫助。"></textarea>

<i class='iconfont-9 icon-biaoqing emotion' id="face_0" onclick="emotion(this)"></i>

2.Jquery：

function emotion(_obj) {
    var assign='textareaComment'; //給這個控制元件賦值
    var path='../Public/Biaoqing/Face/'; //表情存放的路徑
    var id='facebox'; //表情盒子的ID
    var tip= 'em_';
    var strFace,labFace;
    if($('#'+id).length<=0){
     strFace = '<div id="'+id+'" style="position:absolute;display:none;z-index:1000;" class="qqFace">' +
     '<table border="0" cellspacing="0" cellpadding="0"><tr>';
     for(var i=1; i<=75; i++){
        labFace = '['+tip+i+']';
        strFace += '<td><img src="'+path+i+'.gif" onclick="instBq(\''+assign+'\',\''+labFace+'\')" /></td>';
       if( i % 15 == 0 ) strFace += '</tr><tr>';
     }
    strFace += '</tr></table></div>';
    $(_obj).parent().append(strFace);
    var offset = $(_obj).position();
    var top = offset.top + $(_obj).outerHeight();
    $('#'+id).css('top',top);
    $('#'+id).css('left',offset.left);
    $('#'+id).toggle();
  }
}
/*插入表情*/
function instBq(_id,_bq){
    var obj = document.getElementById(_id);
    obj.focus();  
    var leng=obj.value.length;
    var charvalue=_bq;
    if(typeof document.selection !="undefined")   //ie
    {
      var r =document.selection.createRange();   
      r.text   =   charvalue;   
    }
    else //firefox
    {
      obj.value=obj.value.substr(0,obj.selectionStart)+ charvalue +obj.value.substring(obj.selectionStart,leng);
    } 
    var id='facebox'; //表情盒子的ID
    $('#'+id).hide();
    $('#'+id).remove();
   
 }

3.Css（say.css）：

    .qqFace{margin-top:4px;background:#fff;padding:2px;border:1px #dfe6f6 solid;}
    .qqFace table td{padding:0px;}
    .qqFace table td img{cursor:pointer;border:1px #fff solid;}
    .qqFace table td img:hover{border:1px #0066cc solid;}


    span.emotion {
       background: url("../images/icon.gif") no-repeat scroll 2px 0 transparent;
       cursor: pointer;
       height: 20px;
       padding-left: 24px;
       width: 42px;
   }
   span.emotion:hover{
      background-position: 2px -30px;
  }
  .tbtnarea{margin:6px 0 0}
  .ly textarea,.ddreply textarea{border:1px solid #dddddd;resize: none}