利用html、css 实现带表情的评论框的制作教程

html带表情的评论框，表情通过json数据加载，可以根据自己的喜好改变表情。本评论框代码为html，css，jq三个方面的代码。图1为原始状态，图2为点击表情时出现的表情列表，可以任意选择一个或者多个。下面我们来看看实现的代码。
图1

                               
登录/注册后可看大图

图2
8 W; e! d3 F" N

: X1 m7 X+ l  q! i2 `9 |1 n                               
登录/注册后可看大图

7 Z$ s3 b0 K$ ]; E实现的代码：
1 s5 o, G+ I4 W1 h" {3 @: H2 Q6 B! Ahtml代码：
" R( C% R4 z/ m. ^4 P3 d/ |xml/html code复制内容到剪贴板
1 I8 f* P- D' m+ e# k' E9 T; p9 Y<div class=main>
  `$ ?4 P7 `' \<div class=input_box>
1 P3 }) j: f* v) c- `7 F<textarea class=input_text></textarea>
<div class=facediv> </div>
( E" Y+ b: I8 t$ }  I) l8 Z<div class=input_foot> <a class=imgbtn href=javascript:void(0);></a><a class=postbtn>确定</a> </div>
+ Z0 e4 Z9 U- t7 H</div>
</div>
, G# K! K/ C, ^/ ^5 }% C8 E8 R: Pcss3代码：
css code复制内容到剪贴板
.input_box {
1 b4 J. _0 o/ g) y5 Hwidth: 495px;
& w. z: c5 `$ theight: 160px;
border: 1px solid #ccc;
transition: border linear .2s, box-shadow linear .5s;
+ I/ w" G- u. @1 ]# z-moz-transition: border linear .2s, -moz-box-shadow linear .5s;
-webkit-transition: border linear .2s, -webkit-box-shadow linear .5s;
& S* x# x, h5 E( l8 |1 y) d8 Z) ]-moz-border-radius: 5px;
-webkit-border-radius: 5px;
7 P- ?3 J" A* M3 A* H. Y4 Q& Hborder-radius: 5px;
0 n# O5 T& R' O# zbackground-color: #fff;
overflow: hidden;
4 {0 k6 y, |. R! _9 ?6 ~5 K! j+ j) Nposition: absolute;
-moz-box-shadow: 0 0 5px #ccc;
; J) O3 L% G- Z+ `0 \3 {- t6 r-webkit-box-shadow: 0 0 5px #ccc;
, N5 ?, H  N6 ]1 h$ ~% Dbox-shadow: 0 0 5px #ccc;
; `8 K# @, w' j3 R0 Q}
.input_box>textarea {
4 ?% i( w% F& c9 [width: 485px;
height: 111px;
padding: 5px;
outline: none;
border: 0px solid #fff;
resize: none;
5 x" a/ V$ }9 mfont: 13px 微软雅黑, arial, helvetica, sans-serif;
-moz-border-radius: 5px;
4 ^$ o) U+ ?5 p) ~3 M$ K  m-webkit-border-radius: 5px;
border-radius: 5px;
' {& U7 X+ a' I  v2 b  j2 T  Y}
! c; h1 o$ k5 V4 c( V- S& r.input_foot {
width: 100%;
8 |9 t9 L* l7 K4 Y3 N+ D& k( dheight: 35px;
border-top: 1px solid #ccc;
) V' c3 N6 }8 Q/ M; zbackground-color: #fff;
. S2 H. A3 ?4 k4 @2 s-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
6 s: P! s+ p+ F, F/ x- N3 E$ rborder-radius: 0 0 5px 5px;
! U' D4 A+ X0 q" bposition: absolute;
; l2 N$ h8 N: m7 ~' A7 T}
.imgbtn {
float: left;
  v; T* ?* f# T% A) r- p2 `margin-top: 8px;
/ N6 Q0 {4 D7 D1 E' s: Xmargin-left: 10px;
background-image: url(imgs.png);
& Q3 k3 W. u6 m! k$ _% `background-repeat: no-repeat;
background-position: 0 -13px;
4 w5 q3 {: T; b% pheight: 18px;
9 t, c0 |8 |) B1 b2 Jwidth: 20px;
cursor: pointer
}
.imgbtn:active {
margin-top: 9px;
/ P- K% j9 b- V& q* A1 m}
% D: B) U+ e3 Y$ f' P7 w.imgbtn:hover {
1 N( I# m5 }+ l* J" z9 jbackground-position: 0 -31px
}
) U2 k- P" V' X9 r* s) p8 W; A% l.postbtn {
, y9 F3 x# s4 x0 Pfloat: rightright;
4 e2 K( k3 U! M" D2 W$ mfont: 13px 微软雅黑, arial, helvetica, sans-serif;
color: #808080;
padding: 9px 20px 7px 20px;
" u$ e; u, n) ?3 m  i" Dborder-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;
0 E* A# h6 G0 z( n7 f; R2 L- q}
0 `& B& ]) H' J6 ]% U# _.facediv {
- t: m3 h' H6 q/ F* twidth: 500px;
1 M& ^) r- l) `# j' |+ E. Mheight: 120px;
border-top: 1px solid #ccc;
position: absolute;
: v* T7 M/ Y* P+ M) F# wbackground-color: #fff;
9 T& Y. N4 {& {-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
+ v% ~8 @  w# \7 y5 N1 N4 F.facediv>img {
; P+ a4 U6 ]5 ?. q$ Rborder: 1px solid #ccc;
% Q1 I. N, g9 S# Z1 P1 _) yfloat: left;
1 W8 l' L; |/ l4 H3 Jmargin-left: -1px;
margin-top: -1px;
9 |( y0 J. t9 [0 u! kposition: relative;
width: 24px;
7 j) O1 f+ L! }# Xheight: 24px;
6 ?: g/ R; g" v4 J/ _" [/ _padding: 3px 3px 3px 3px;
cursor: pointer;
}
' Q/ R# D5 n! Q% O4 d; }.facediv>img:hover {
3 E/ P+ A3 m: ~! X. k$ d' Z+ h9 Qbackground-color: #efefef;
}
! H) ^& j3 t. ]: q' p# }  ], J.facediv>img:active {
padding: 4px 3px 2px 3px;
1 X6 H- z% p0 b; }9 C9 K$ ]}
3 R& L7 H9 j' Q. B8 a7 ojavascript代码:
javascript code复制内容到剪贴板
var imgiputhandler={
6 d  p# ?  J+ z" C- j1 dfacepath:[
5 Y  P1 ~2 m1 l1 U6 ^0 r% V( ?2 v{facename:微笑,facepath:0_微笑.gif},
{facename:撇嘴,facepath:1_撇嘴.gif},
& p: B) d. C+ |{facename:色,facepath:2_色.gif},
{facename:发呆,facepath:3_发呆.gif},
{facename:得意,facepath:4_得意.gif},
% t  p" w# B9 [{facename:流泪,facepath:5_流泪.gif},
8 H0 d: r1 `$ m' Y3 V! e" M' g* L0 P" r{facename:害羞,facepath:6_害羞.gif},
{facename:闭嘴,facepath:7_闭嘴.gif},
{facename:大哭,facepath:9_大哭.gif},
9 ?# L9 T6 x: a+ }! l! Q' x3 |{facename:尴尬,facepath:10_尴尬.gif},
{facename:发怒,facepath:11_发怒.gif},
2 a3 |" n5 `0 _{facename:调皮,facepath:12_调皮.gif},
6 {3 X+ ~4 Q% ~& S{facename:龇牙,facepath:13_龇牙.gif},
{facename:惊讶,facepath:14_惊讶.gif},
{facename:难过,facepath:15_难过.gif},
4 e1 D5 {( R, c+ q1 p{facename:酷,facepath:16_酷.gif},
1 J. ~: a/ ?5 ^6 n- j3 w{facename:冷汗,facepath:17_冷汗.gif},
! k; f# {# r, i+ w2 d0 x( F{facename:抓狂,facepath:18_抓狂.gif},
{facename:吐,facepath:19_吐.gif},
6 v2 D( L" d( z( g  D{facename:偷笑,facepath:20_偷笑.gif},
{facename:可爱,facepath:21_可爱.gif},
1 r4 e, S" C# \# o* g" K. A{facename:白眼,facepath:22_白眼.gif},
{facename:傲慢,facepath:23_傲慢.gif},
8 x+ p, c$ k, i. N- e{facename:饥饿,facepath:24_饥饿.gif},
$ J8 K; t& V9 x5 j{facename:困,facepath:25_困.gif},
{facename:惊恐,facepath:26_惊恐.gif},
{facename:流汗,facepath:27_流汗.gif},
{facename:憨笑,facepath:28_憨笑.gif},
: O9 u/ Y7 |1 ^, q{facename:大兵,facepath:29_大兵.gif},
8 X4 t! V% i6 N{facename:奋斗,facepath:30_奋斗.gif},
{facename:咒骂,facepath:31_咒骂.gif},
- |" Z( w1 f. e. S; R{facename:疑问,facepath:32_疑问.gif},
6 ^: O( Z' J" D# I# I7 p: t$ O{facename:嘘,facepath:33_嘘.gif},
. @! m& h7 v5 {- Y3 \! G4 e2 i{facename:晕,facepath:34_晕.gif},
3 w# L- D  z0 d{facename:折磨,facepath:35_折磨.gif},
{facename:衰,facepath:36_衰.gif},
! ]9 \& j! J4 W{facename:骷髅,facepath:37_骷髅.gif},
8 e7 K& B0 J4 P# F  O9 z{facename:敲打,facepath:38_敲打.gif},
7 x: r: N5 {. h& E- \, U{facename:再见,facepath:39_再见.gif},
; ?2 e1 R. ?. M' ~{facename:擦汗,facepath:40_擦汗.gif},
9 j% {* u! x6 g- ?; M6 S# n
0 l4 N0 R( J5 u3 H- `$ J{facename:抠鼻,facepath:41_抠鼻.gif},
{facename:鼓掌,facepath:42_鼓掌.gif},
  s# {& o* j9 p{facename:糗大了,facepath:43_糗大了.gif},
{facename:坏笑,facepath:44_坏笑.gif},
{facename:左哼哼,facepath:45_左哼哼.gif},
+ @' M( c: r) Q7 W{facename:右哼哼,facepath:46_右哼哼.gif},
{facename:哈欠,facepath:47_哈欠.gif},
{facename:鄙视,facepath:48_鄙视.gif},
{facename:委屈,facepath:49_委屈.gif},
  Y- \# V& N$ z' B{facename:快哭了,facepath:50_快哭了.gif},
{facename:阴险,facepath:51_阴险.gif},
, ]" m+ d) b& ?5 \( ~{facename:亲亲,facepath:52_亲亲.gif},
{facename:吓,facepath:53_吓.gif},
& }9 \/ _* f4 ~- d{facename:可怜,facepath:54_可怜.gif},
) _7 q% I0 x$ O0 C* {8 Z{facename:菜刀,facepath:55_菜刀.gif},
{facename:西瓜,facepath:56_西瓜.gif},
2 l7 N1 `' ^, M$ M  z{facename:啤酒,facepath:57_啤酒.gif},
{facename:篮球,facepath:58_篮球.gif},
# m" P) E( M5 }5 P, u{facename:乒乓,facepath:59_乒乓.gif},
- O& a% @6 R7 e4 H. |; x{facename:拥抱,facepath:78_拥抱.gif},
{facename:握手,facepath:81_握手.gif},
{facename:得意地笑,facepath:得意地笑.gif},
/ ?+ B! t( b7 R, a2 K& s{facename:听音乐,facepath:听音乐.gif}
9 A  x& @: V% Z]
,
init:function(){
var isshowimg=false;
7 N- t! d! j' l$(.input_text).focusout(function(){
$(this).parent().css(border-color, #cccccc);
1 ~6 ]) S* y* {$(this).parent().css(box-shadow, none);
! N4 }# j7 J+ c: m' g$(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));
9 o) R0 H  Y8 U' b: x5 |$(this).parent().css(-moz-box-shadow, 0 0 3px rgba(241,39,232,.5));
2 Z- z1 h& f; `) v" m) K$ Z$(this).parent().css(-webkit-box-shadow, 0 0 3px rgba(19,105,252,3));
});
$(.imgbtn).click(function(){
# z* O' r! e, }4 ^9 ^% L: F! Mif(isshowimg==false){
isshowimg=true;
; T3 U9 q8 r( S1 g) z# z$(this).parent().prev().animate({margintop:-125px},300);
if($(.facediv).children().length==0){
& H0 n; y, {' X2 F+ B2 Gfor(var i=0;i<imgiputhandler.facepath.length;i ){
$(.facediv).append(<img title=\ imgiputhandler.facepath.facename \ src=\face/ imgiputhandler.facepath.facepath \ />);
}
$(.facediv>img).click(function(){
0 x( M% f, m0 Y3 [8 W; Q& @0 ]$ y0 x
isshowimg=false;
$(this).parent().animate({margintop:0px},300);
5 P6 y& C9 c1 o7 Nimgiputhandler.insertatcursor($(.input_text)[0],[ $(this).attr(title) ]);
4 m6 N' I* e& L0 V3 n4 u});
3 t) {- \; d# u' _# I* L}
* W! m% H6 {/ [# M2 u! A* j+ e) d}else{
isshowimg=false;
* l; R% M% b6 ~% q" F2 F" Z$(this).parent().prev().animate({margintop:0px},300);
% o, @" b& R' V; T6 c$ f* j}
3 [8 t. F/ y8 \& w});
$(.postbtn).click(function(){
. f4 n  J. i' halert($(.input_text).val());
});
/ i* E7 T: |) D! a},
insertatcursor:function(myfield, myvalue) {
- x# v7 ~0 z5 z" E9 \2 A7 oif (document.selection) {
myfield.focus();
3 F0 o$ E1 b+ [& s$ F( zsel = 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;
}
) Q/ i. T* R; N' }myfield.focus();
' b; G% q) N5 a8 r0 Zmyfield.selectionstart = startpos myvalue.length;
myfield.selectionend = startpos myvalue.length;
7 c/ {' A: b) \/ @} else {
9 g& I! i' x. J+ K6 v$ X7 ]8 q( amyfield.value = myvalue;
myfield.focus();
}
- ?& Y) @9 W6 T' y) c$ ]& O}
1 q, h) K* K* }}
4 a/ q5 W, S( z7 m$ h
% v0 F( i- ^+ l0 i6 F& r& U
  X+ `& k& N* @5 P' ], b  L更多网页制作信息请查看： 网页制作

阿额~~~这些人都疯特勒~~~~~

真是有你的！

先踹你一脚再说~~~~~~

我去看看 网络上的事 我不是很会 哎

那个家 让它沉下去吧！ 不要啦

命不能争，运可以造，弱者认命，强者抗命，能者求命，智者造命。

呵呵 放心 如我算错 你以后来砸我的帖子 呵呵

我想骂我自己

我不是来为楼主呐喊加油的，也不是对楼主进行围堵攻击的。