html带表情的评论框，表情通过json数据加载，可以根据自己的喜好改变表情。本评论框代码为html，css，jq三个方面的代码。图1为原始状态，图2为点击表情时出现的表情列表，可以任意选择一个或者多个。下面我们来看看实现的代码。
图1
图2
实现的代码：
html代码：
xml/html code复制内容到剪贴板
div class=main>               div class=input_box>                 textarea class=input_text>textarea>                 div class=facediv> div>                 div class=input_foot> a class=imgbtn href=javascript:void(0);>a>a class=postbtn>确定a> div>               div>             div>
css3代码：
css code复制内容到剪贴板
.input_box {          width: 495px;          height: 160px;          border: 1px solid #ccc;          transition: border linear .2s, box-shadow linear .5s;          -moz-transition: border linear .2s, -moz-box-shadow linear .5s;          -webkit-transition: border linear .2s, -webkit-box-shadow linear .5s;          -moz-border-radius: 5px;          -webkit-border-radius: 5px;          border-radius: 5px;          background-color: #fff;          overflow: hidden;          position: absolute;          -moz-box-shadow: 0 0 5px #ccc;          -webkit-box-shadow: 0 0 5px #ccc;          box-shadow: 0 0 5px #ccc;      }      .input_box>textarea {          width: 485px;          height: 111px;          padding: 5px;          outline: none;          border: 0px solid #fff;          resize: none;          font: 13px 微软雅黑, arial, helvetica, sans-serif;          -moz-border-radius: 5px;          -webkit-border-radius: 5px;          border-radius: 5px;      }      .input_foot {          width: 100%;          height: 35px;          border-top: 1px solid #ccc;          background-color: #fff;          -moz-border-radius: 0 0 5px 5px;          -webkit-border-radius: 0 0 5px 5px;          border-radius: 0 0 5px 5px;          position: absolute;      }      .imgbtn {          float: left;          margin-top: 8px;          margin-left: 10px;          background-image: url(imgs.png);          background-repeat: no-repeat;          background-position: 0 -13px;          height: 18px;          width: 20px;          cursor: pointer      }      .imgbtn:active {          margin-top: 9px;      }      .imgbtn:hover {          background-position: 0 -31px      }      .postbtn {          float: rightright;          font: 13px 微软雅黑, arial, helvetica, sans-serif;          color: #808080;          padding: 9px 20px 7px 20px;          border-left: 1px solid #ccc;          cursor: pointer;          -moz-border-radius: 0 0 5px 0;          -webkit-border-radius: 0 0 5px 0;          border-radius: 0 0 5px 0;      }      .postbtn:hover {          color: #333;          background-color: #efefef;      }      .postbtn:active {          padding: 10px 20px 6px 20px;      }      .facediv {          width: 500px;          height: 120px;          border-top: 1px solid #ccc;          position: absolute;          background-color: #fff;          -moz-border-radius: 5px 5px 0 0;          -webkit-border-radius: 5px 5px 0 0;          border-radius: 5px 5px 0 0;      }      .facediv>img {          border: 1px solid #ccc;          float: left;          margin-left: -1px;          margin-top: -1px;          position: relative;          width: 24px;          height: 24px;          padding: 3px 3px 3px 3px;          cursor: pointer;      }      .facediv>img:hover {          background-color: #efefef;      }      .facediv>img:active {          padding: 4px 3px 2px 3px;      }
javascript代码:
javascript code复制内容到剪贴板
var imgiputhandler={          facepath:[              {facename:微笑,facepath:0_微笑.gif},              {facename:撇嘴,facepath:1_撇嘴.gif},              {facename:色,facepath:2_色.gif},              {facename:发呆,facepath:3_发呆.gif},              {facename:得意,facepath:4_得意.gif},              {facename:流泪,facepath:5_流泪.gif},              {facename:害羞,facepath:6_害羞.gif},              {facename:闭嘴,facepath:7_闭嘴.gif},              {facename:大哭,facepath:9_大哭.gif},              {facename:尴尬,facepath:10_尴尬.gif},              {facename:发怒,facepath:11_发怒.gif},              {facename:调皮,facepath:12_调皮.gif},              {facename:龇牙,facepath:13_龇牙.gif},              {facename:惊讶,facepath:14_惊讶.gif},              {facename:难过,facepath:15_难过.gif},              {facename:酷,facepath:16_酷.gif},              {facename:冷汗,facepath:17_冷汗.gif},              {facename:抓狂,facepath:18_抓狂.gif},              {facename:吐,facepath:19_吐.gif},              {facename:偷笑,facepath:20_偷笑.gif},              {facename:可爱,facepath:21_可爱.gif},              {facename:白眼,facepath:22_白眼.gif},              {facename:傲慢,facepath:23_傲慢.gif},              {facename:饥饿,facepath:24_饥饿.gif},              {facename:困,facepath:25_困.gif},              {facename:惊恐,facepath:26_惊恐.gif},              {facename:流汗,facepath:27_流汗.gif},              {facename:憨笑,facepath:28_憨笑.gif},              {facename:大兵,facepath:29_大兵.gif},              {facename:奋斗,facepath:30_奋斗.gif},              {facename:咒骂,facepath:31_咒骂.gif},              {facename:疑问,facepath:32_疑问.gif},              {facename:嘘,facepath:33_嘘.gif},              {facename:晕,facepath:34_晕.gif},              {facename:折磨,facepath:35_折磨.gif},              {facename:衰,facepath:36_衰.gif},              {facename:骷髅,facepath:37_骷髅.gif},              {facename:敲打,facepath:38_敲打.gif},              {facename:再见,facepath:39_再见.gif},              {facename:擦汗,facepath:40_擦汗.gif},                            {facename:抠鼻,facepath:41_抠鼻.gif},              {facename:鼓掌,facepath:42_鼓掌.gif},              {facename:糗大了,facepath:43_糗大了.gif},              {facename:坏笑,facepath:44_坏笑.gif},              {facename:左哼哼,facepath:45_左哼哼.gif},              {facename:右哼哼,facepath:46_右哼哼.gif},              {facename:哈欠,facepath:47_哈欠.gif},              {facename:鄙视,facepath:48_鄙视.gif},              {facename:委屈,facepath:49_委屈.gif},              {facename:快哭了,facepath:50_快哭了.gif},              {facename:阴险,facepath:51_阴险.gif},              {facename:亲亲,facepath:52_亲亲.gif},              {facename:吓,facepath:53_吓.gif},              {facename:可怜,facepath:54_可怜.gif},              {facename:菜刀,facepath:55_菜刀.gif},              {facename:西瓜,facepath:56_西瓜.gif},              {facename:啤酒,facepath:57_啤酒.gif},              {facename:篮球,facepath:58_篮球.gif},              {facename:乒乓,facepath:59_乒乓.gif},              {facename:拥抱,facepath:78_拥抱.gif},              {facename:握手,facepath:81_握手.gif},              {facename:得意地笑,facepath:得意地笑.gif},              {facename:听音乐,facepath:听音乐.gif}          ]          ,          init:function(){              var isshowimg=false;              $(.input_text).focusout(function(){                  $(this).parent().css(border-color, #cccccc);                  $(this).parent().css(box-shadow, none);                  $(this).parent().css(-moz-box-shadow, none);                  $(this).parent().css(-webkit-box-shadow, none);              });              $(.input_text).focus(function(){              $(this).parent().css(border-color, rgba(19,105,172,.75));              $(this).parent().css(box-shadow, 0 0 3px rgba(19,105,192,.5));              $(this).parent().css(-moz-box-shadow, 0 0 3px rgba(241,39,232,.5));              $(this).parent().css(-webkit-box-shadow, 0 0 3px rgba(19,105,252,3));              });              $(.imgbtn).click(function(){                  if(isshowimg==false){                      isshowimg=true;                      $(this).parent().prev().animate({margintop:-125px},300);                      if($(.facediv).children().length==0){                          for(var i=0;i                         $(.facediv).append( imgiputhandler.facepath[i].facename \ src=\face/ imgiputhandler.facepath[i].facepath \ />);                          }                          $(.facediv>img).click(function(){                                                             isshowimg=false;                              $(this).parent().animate({margintop:0px},300);                              imgiputhandler.insertatcursor($(.input_text)[0],[ $(this).attr(title) ]);                          });                      }                  }else{                      isshowimg=false;                      $(this).parent().prev().animate({margintop:0px},300);                  }              });              $(.postbtn).click(function(){                  alert($(.input_text).val());              });          },          insertatcursor:function(myfield, myvalue) {          if (document.selection) {              myfield.focus();              sel = document.selection.createrange();              sel.text = myvalue;              sel.select();          } else if (myfield.selectionstart || myfield.selectionstart == 0) {              var startpos = myfield.selectionstart;              var endpos = myfield.selectionend;              var restoretop = myfield.scrolltop;              myfield.value = myfield.value.substring(0, startpos)   myvalue   myfield.value.substring(endpos, myfield.value.length);              if (restoretop > 0) {                  myfield.scrolltop = restoretop;              }              myfield.focus();              myfield.selectionstart = startpos   myvalue.length;              myfield.selectionend = startpos   myvalue.length;          } else {              myfield.value  = myvalue;              myfield.focus();          }      }      }