HTML带表情的评论框，表情通过Json数据加载，可以根据自己的喜好改变表情。本评论框代码为HTML，CSS，JQ三个方面的代码。图1为原始状态，图2为点击表情时出现的表情列表，可以任意选择一个或者多个。下面我们来看看实现的代码。
图1
图2
实现的代码：
html代码：
XML/HTML Code复制内容到剪贴板
<divclass="Main"><divclass="Input_Box"><textareaclass="Input_text"></textarea><divclass="faceDiv"></div><divclass="Input_Foot"><aclass="imgBtn"href="javascript:void(0);"></a><aclass="postBtn">确定</a></div></div></div> css3代码：
CSS Code复制内容到剪贴板
.Input_Box{width:495px;height:160px;border:1pxsolid#ccc;transition:borderlinear.2s,box-shadowlinear.5s;-moz-transition:borderlinear.2s,-moz-box-shadowlinear.5s;-webkit-transition:borderlinear.2s,-webkit-box-shadowlinear.5s;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;background-color:#fff;overflow:hidden;position:absolute;-moz-box-shadow:005px#ccc;-webkit-box-shadow:005px#ccc;box-shadow:005px#ccc;}.Input_Box>textarea{width:485px;height:111px;padding:5px;outline:none;border:0pxsolid#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:1pxsolid#ccc;background-color:#fff;-moz-border-radius:005px5px;-webkit-border-radius:005px5px;border-radius:005px5px;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:9px20px7px20px;border-left:1pxsolid#ccc;cursor:pointer;-moz-border-radius:005px0;-webkit-border-radius:005px0;border-radius:005px0;}.postBtn:hover{color:#333;background-color:#efefef;}.postBtn:active{padding:10px20px6px20px;}.faceDiv{width:500px;height:120px;border-top:1pxsolid#ccc;position:absolute;background-color:#fff;-moz-border-radius:5px5px00;-webkit-border-radius:5px5px00;border-radius:5px5px00;}.faceDiv>img{border:1pxsolid#ccc;float:left;margin-left:-1px;margin-top:-1px;position:relative;width:24px;height:24px;padding:3px3px3px3px;cursor:pointer;}.faceDiv>img:hover{background-color:#efefef;}.faceDiv>img:active{padding:4px3px2px3px;} Javascript代码:
JavaScript Code复制内容到剪贴板
varImgIputHandler={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(){varisShowImg=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","003pxrgba(19,105,192,.5)");$(this).parent().css("-moz-box-shadow","003pxrgba(241,39,232,.5)");$(this).parent().css("-webkit-box-shadow","003pxrgba(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(vari=0;i<ImgIputHandler.facePath.length;i){$(".faceDiv").append("<imgtitle=\""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();}elseif(myField.selectionStart||myField.selectionStart=="0"){varstartPos=myField.selectionStart;varendPos=myField.selectionEnd;varrestoreTop=myField.scrollTop;myField.value=myField.value.substring(0,startPos)myValuemyField.value.substring(endPos,myField.value.length);if(restoreTop>0){myField.scrollTop=restoreTop;}myField.focus();myField.selectionStart=startPosmyValue.length;myField.selectionEnd=startPosmyValue.length;}else{myField.value=myValue;myField.focus();}}} 
