HTML帶表情的評論框，表情通過Json數(shù)據(jù)加載，可以根據(jù)自己的喜好改變表情。本評論框代碼為HTML，CSS，JQ三個方面的代碼。圖1為原始狀態(tài)，圖2為點擊表情時出現(xiàn)的表情列表，可以任意選擇一個或者多個。下面我們來看看實現(xiàn)的代碼。
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <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>
CSS Code復(fù)制內(nèi)容到剪貼板
JavaScript Code復(fù)制內(nèi)容到剪貼板
- var ImgIputHandler={
- facePath:[
- {faceName:"微笑",facePath:"0_微笑.gif"},
- {faceName:"撇嘴",facePath:"1_撇嘴.gif"},
- {faceName:"色",facePath:"2_色.gif"},
- {faceName:"發(fā)呆",facePath:"3_發(fā)呆.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:"發(fā)怒",facePath:"11_發(fā)怒.gif"},
- {faceName:"調(diào)皮",facePath:"12_調(diào)皮.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<ImgIputHandler.facePath.length;i ){
- $(".faceDiv").append("<img title=\&;" 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();
- }
- }
- }
