利用HTMLCSS實(shí)現(xiàn)帶表格情評(píng)論框制作教程

1、HTML帶表情的談?wù)摽?，表情?jīng)過(guò)Json數(shù)據(jù)加載，可以依照自己的喜好改變表情。本談?wù)摽虼a為HTML，CSS，JQ三個(gè)方面的代碼。圖1為原始狀態(tài)，圖2為點(diǎn)擊表情時(shí)出現(xiàn)的表情列表，可以任意選擇一個(gè)也很多個(gè)。下面我們來(lái)看看實(shí)現(xiàn)的代碼。實(shí)現(xiàn)的代碼：html代碼：XML/HTMLCode1.4.確定6.7.css3代碼：CSSCode1.Input_Boxwidth:495px;height:160px;border:1pxsolid#ccc;transition:borderlinear.2s,box-shadowlinear.5s;-moz-transition:borderlinear.2s,-

2、moz-box-shadowlinear.5s;7.-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;17.18.Input_

3、Boxtextareawidth: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;29.30.Input_Footwidth:100%;height:35px;border-top:1pxsolid#ccc;background-color:#fff;-moz-border-ra

4、dius:005px5px;-webkit-border-radius:005px5px;border-radius:005px5px;position:absolute;39.40.imgBtnfloat: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:pointer50.51.imgBtn:activemargin-top:9px;53

5、.54.imgBtn:hoverbackground-position:0-31px56.57.postBtnfloat: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;67.68.postBtn:hovercolor:#333;back

6、ground-color:#efefef;71.72.postBtn:activepadding:10px20px6px20px;74.75.faceDivwidth:500px;height:120px;border-top:1pxsolid#ccc;position:absolute;background-color:#fff;-moz-border-radius:5px5px00;-webkit-border-radius:5px5px00;border-radius:5px5px00;84.85.faceDivimgborder:1pxsolid#ccc;float:left;marg

7、in-left:-1px;margin-top:-1px;position:relative;width:24px;height:24px;padding:3px3px3px3px;cursor:pointer;95.96.faceDivimg:hoverbackground-color:#efefef;98.99.faceDivimg:activepadding:4px3px2px3px;101.Javascript代碼:JavaScriptCode1.varImgIputHandler=facePath:3.faceName:微笑,facePath:0_微笑.gif,4.faceName:

8、撇嘴,facePath:1_撇嘴.gif,5.faceName:色,facePath:2_色.gif,6.faceName:發(fā)呆,facePath:3_發(fā)呆.gif,7.faceName:愉悅,facePath:4_愉悅.gif,8.faceName:嗚咽,facePath:5_嗚咽.gif,9.faceName:害羞,facePath:6_害羞.gif,10.faceName:閉嘴,facePath:7_閉嘴.gif,11.faceName:大哭,facePath:9_大哭.gif,12.faceName:尷尬,facePath:10_尷尬.gif,13.faceName:憤慨,facePa

9、th:11_憤慨.gif,14.faceName:調(diào)皮,facePath:12_調(diào)皮.gif,15.faceName:齜牙,facePath:13_齜牙.gif,16.faceName:驚訝,facePath:14_驚訝.gif,17.faceName:傷心,facePath:15_傷心.gif,18.faceName:酷,facePath:16_酷.gif,19.faceName:盜汗,facePath:17_盜汗.gif,20.faceName:抓狂,facePath:18_抓狂.gif,21.faceName:吐,facePath:19_吐.gif,22.faceName:偷笑,face

10、Path:20_偷笑.gif,23.faceName:可愛(ài),facePath:21_可愛(ài).gif,24.faceName:白眼,facePath:22_白眼.gif,faceName:驕橫,facePath:23_驕橫.gif,26.faceName:饑餓,facePath:24_饑餓.gif,27.faceName:困,facePath:25_困.gif,28.faceName:慌張,facePath:26_慌張.gif,29.faceName:流汗,facePath:27_流汗.gif,30.faceName:憨笑,facePath:28_憨笑.gif,31.faceName:大兵,fac

11、ePath:29_大兵.gif,faceName:奮斗,facePath:30_奮斗.gif,faceName:謾罵,facePath:31_謾罵.gif,34.faceName:疑問(wèn),facePath:32_疑問(wèn).gif,35.faceName:噓,facePath:33_噓.gif,36.faceName:暈,facePath:34_暈.gif,37.faceName:殘害,facePath:35_殘害.gif,38.faceName:衰,facePath:36_衰.gif,39.faceName:骷髏,facePath:37_骷髏.gif,40.faceName:敲打,facePath:

12、38_敲打.gif,41.faceName:再見(jiàn),facePath:39_再見(jiàn).gif,42.faceName:擦汗,facePath:40_擦汗.gif,faceName:摳鼻,facePath:41_摳鼻.gif,45.faceName:鼓掌,facePath:42_鼓掌.gif,46.faceName:糗大了,facePath:43_糗大了.gif,faceName:壞笑,facePath:44_壞笑.gif,48.faceName:左哼哼,facePath:45_左哼哼.gif,49.faceName:右哼哼,facePath:46_右哼哼.gif,50.faceName:哈欠,fac

13、ePath:47_哈欠.gif,51.faceName:鄙視,facePath:48_鄙視.gif,52.faceName:委屈,facePath:49_委屈.gif,53.faceName:快哭了,facePath:50_快哭了.gif,54.faceName:陰險(xiǎn),facePath:51_陰險(xiǎn).gif,55.faceName:親親,facePath:52_親親.gif,56.faceName:嚇,facePath:53_嚇.gif,57.faceName:可憐,facePath:54_可憐.gif,58.faceName:菜刀,facePath:55_菜刀.gif,59.faceName:

14、西瓜,facePath:56_西瓜.gif,60.faceName:啤酒,facePath:57_啤酒.gif,61.faceName:籃球,facePath:58_籃球.gif,62.faceName:乒乓,facePath:59_乒乓.gif,63.faceName:擁抱,facePath:78_擁抱.gif,64.faceName:握手,facePath:81_握手.gif,65.faceName:愉悅地笑,facePath:愉悅地笑.gif,66.faceName:聽音樂(lè),facePath:聽音樂(lè).gif,Init:function()varisShowImg=false;71.$(.

15、Input_text).focusout(function()72.$(this).parent().css(border-color,#cccccc);73.$(this).parent().css(box-shadow,none);74.$(this).parent().css(-moz-box-shadow,none);75.$(this).parent().css(-webkit-box-shadow,none););$(.Input_text).focus(function()$(this).parent().css(border-color,rgba(19,105,172,.75)

16、;$(this).parent().css(box-shadow,003pxrgba(19,105,192,.5);$(this).parent().css(-moz-box-shadow,003pxrgba(241,39,232,.5);81.$(this).parent().css(-webkit-box-shadow,003pxrgba(19,105,252,3););$(.imgBtn).click(function()84.if(isShowImg=false)85.isShowImg=true;86.$(this).parent().prev().animate(marginTop

17、:-125px,300);87.if($(.faceDiv).children().length=0)88.for(vari=0;iImgIputHandler.facePath.length;i)89.$(.faceDiv).append();90.$(.faceDivimg).click(function()92.93.isShowImg=false;$(this).parent().animate(marginTop:0px,300);95.ImgIputHandler.insertAtCursor($(.Input_text)0,$(this).attr(title);96.);els

18、eisShowImg=false;100.$(this).parent().prev().animate(marginTop:0px,300););$(.postBtn).click(function()104.alert($(.Input_text).val(););,insertAtCursor:function(myField,myValue)if(document.selection)myField.focus();sel=();sel.text=myValue;sel.select();113.elseif(myField.selectionStart|myField.selectionStart=0)varstartPos=myField.selectionStart;115.varendPos=myField.selectionEnd;116.varrestoreTop=myField.scrollTop;117.myField.value=myField.