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

html带表情的评论框，表情通过json数据加载，可以根据自己的喜好改变表情。本评论框代码为html，css，jq三个方面的代码。图1为原始状态，图2为点击表情时出现的表情列表，可以任意选择一个或者多个。下面我们来看看实现的代码。
图1
' y) p4 k: [# K' y% ?* z/ \" v

                               
登录/注册后可看大图

% T, k/ x& K  @+ A图2

( L5 Y& D: U2 K7 C' Z                               
登录/注册后可看大图

0 W* K# [6 Y2 x; B& D/ y: f实现的代码：
html代码：
- x" K% D" M* @1 \0 o9 qxml/html code复制内容到剪贴板
<div class=main>
) [! T/ O" U$ p5 s1 y<div class=input_box>
8 `$ d) O  S, A7 H<textarea class=input_text></textarea>
% z6 B3 Q. T% U8 j8 y, p, x<div class=facediv> </div>
<div class=input_foot> <a class=imgbtn href=javascript:void(0);></a><a class=postbtn>确定</a> </div>
3 Y2 v% I# F6 g' i</div>
</div>
css3代码：
css code复制内容到剪贴板
9 G1 v9 o* H# B% O; _, o; }.input_box {
* [9 |1 \* g# a0 S! r  Awidth: 495px;
height: 160px;
border: 1px solid #ccc;
& h, A5 J: h' V3 s$ F4 S  O) @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;
4 C6 b. k' @  \& f- _-moz-border-radius: 5px;
-webkit-border-radius: 5px;
' Q8 O% @7 ~& a* o  o9 nborder-radius: 5px;
background-color: #fff;
overflow: hidden;
/ n$ |8 @, d+ B9 Sposition: absolute;
! E* X0 K$ @. X4 A-moz-box-shadow: 0 0 5px #ccc;
-webkit-box-shadow: 0 0 5px #ccc;
box-shadow: 0 0 5px #ccc;
: I& P4 s2 ]5 N3 }$ F+ J2 o}
.input_box>textarea {
+ S7 ?. |8 P! h1 {- g5 wwidth: 485px;
height: 111px;
padding: 5px;
1 e$ u2 A$ }2 E: [6 _# F1 Goutline: none;
" N- Q3 D1 t7 K7 S/ _2 M+ fborder: 0px solid #fff;
: z5 P. S- a7 n- \resize: none;
3 F1 _+ o: `' u) J" Ofont: 13px 微软雅黑, arial, helvetica, sans-serif;
-moz-border-radius: 5px;
: v( |7 r9 J" ]! \; z- [-webkit-border-radius: 5px;
: ~5 C6 i1 Q8 C8 R/ N; Uborder-radius: 5px;
! ~; O, h# p7 T& ^0 W}
.input_foot {
, e3 M( b/ g$ f% g  l& Rwidth: 100%;
height: 35px;
8 _1 m  c/ ~% D& p. S3 e% pborder-top: 1px solid #ccc;
background-color: #fff;
: [  F) r* L& @9 F' u-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
9 v% y/ C! F1 ]) k  y" \& bborder-radius: 0 0 5px 5px;
& l, s; [/ a! @1 l  B/ T7 A1 pposition: absolute;
$ y' z& M$ n% \% H/ W0 a% \}
.imgbtn {
float: left;
* L! s3 c; y  a! o2 Nmargin-top: 8px;
! s) L' i3 K2 u$ y6 W2 x$ W) Kmargin-left: 10px;
6 F' U# `- }% Tbackground-image: url(imgs.png);
background-repeat: no-repeat;
$ z$ ~+ z) R* Q! }9 v3 {background-position: 0 -13px;
height: 18px;
width: 20px;
& l* l3 z; x* }- _, y; A9 F5 scursor: pointer
0 l2 B  b/ W* V/ Q}
.imgbtn:active {
margin-top: 9px;
& D! F2 {2 p6 b. u7 X  R}
4 i& w1 a1 t, E$ }.imgbtn:hover {
background-position: 0 -31px
}
.postbtn {
float: rightright;
' M) d0 N; l* R- Jfont: 13px 微软雅黑, arial, helvetica, sans-serif;
color: #808080;
padding: 9px 20px 7px 20px;
border-left: 1px solid #ccc;
4 q5 a% p0 W& }4 E7 K5 c, xcursor: pointer;
-moz-border-radius: 0 0 5px 0;
- x) F) U! ?9 m0 P/ _3 V-webkit-border-radius: 0 0 5px 0;
8 I" Y. l4 a; Iborder-radius: 0 0 5px 0;
" _3 W2 S. L, X; j' [9 F8 E, @/ O}
.postbtn:hover {
color: #333;
background-color: #efefef;
0 `9 N. I) ]+ J, V1 E- f" V9 i+ N8 Z}
.postbtn:active {
padding: 10px 20px 6px 20px;
2 }7 s- P+ V! l/ [- ?* m}
9 h" Z  `2 h0 H, ?# C" X! a' z.facediv {
+ }7 S( ~- c# t* C9 Fwidth: 500px;
height: 120px;
border-top: 1px solid #ccc;
position: absolute;
background-color: #fff;
4 s/ ^; M! o9 U7 Z/ U-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
/ r& O, g( t( L/ Hborder-radius: 5px 5px 0 0;
& x6 R9 t; ~% r}
.facediv>img {
border: 1px solid #ccc;
2 Q) |$ i: h  Y. d) Y+ zfloat: left;
( h- {% ~& Q) C9 r) z1 pmargin-left: -1px;
margin-top: -1px;
. P: s9 r* S' }& E: tposition: relative;
4 @5 q9 K) T6 f2 o: q4 dwidth: 24px;
height: 24px;
/ i2 b" H* u; e- Rpadding: 3px 3px 3px 3px;
! \5 ^+ u3 Q3 x' zcursor: pointer;
! O) `/ O9 r  C8 s' U}
.facediv>img:hover {
8 ~6 H+ S, k9 W9 k0 Z$ Y  x( Ibackground-color: #efefef;
& @+ l1 ?4 u! R' `, ?}
.facediv>img:active {
padding: 4px 3px 2px 3px;
}
javascript代码:
' ~  X9 Y. e* @javascript code复制内容到剪贴板
# o' ~% o1 v: H* h; hvar imgiputhandler={
6 X( ?8 Y/ }. i, e: m: N( wfacepath:[
  R( E2 D8 Q5 `2 A. R: N# P9 b+ `{facename:微笑,facepath:0_微笑.gif},
{facename:撇嘴,facepath:1_撇嘴.gif},
" u- e- }) H. Y9 G{facename:色,facepath:2_色.gif},
0 @! Y* u3 j; o3 A# l, w{facename:发呆,facepath:3_发呆.gif},
  ]# b( P6 R4 I: v- U{facename:得意,facepath:4_得意.gif},
{facename:流泪,facepath:5_流泪.gif},
( X/ |/ F8 w6 a1 A% r{facename:害羞,facepath:6_害羞.gif},
{facename:闭嘴,facepath:7_闭嘴.gif},
{facename:大哭,facepath:9_大哭.gif},
* c4 E2 G+ e* s' c{facename:尴尬,facepath:10_尴尬.gif},
{facename:发怒,facepath:11_发怒.gif},
8 X+ G$ y. l5 N0 @) Y" x% s{facename:调皮,facepath:12_调皮.gif},
( f9 \4 x; y# d1 g' d{facename:龇牙,facepath:13_龇牙.gif},
{facename:惊讶,facepath:14_惊讶.gif},
, X# ]  i7 E' I3 w" _! P{facename:难过,facepath:15_难过.gif},
. g, v: C3 P9 T8 D- b* r{facename:酷,facepath:16_酷.gif},
  a+ @; c9 ~( b9 n! w2 Z{facename:冷汗,facepath:17_冷汗.gif},
  _6 b. C" t) t; O: c  r; `{facename:抓狂,facepath:18_抓狂.gif},
{facename:吐,facepath:19_吐.gif},
" C8 |5 y5 t9 B6 h. b{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},
2 l' N4 K3 R: f$ I) K{facename:憨笑,facepath:28_憨笑.gif},
/ r! Y/ @( P6 f# j$ b. A{facename:大兵,facepath:29_大兵.gif},
{facename:奋斗,facepath:30_奋斗.gif},
. ?" U6 t+ l5 m, y{facename:咒骂,facepath:31_咒骂.gif},
1 {& J+ V* G7 q$ l$ A{facename:疑问,facepath:32_疑问.gif},
{facename:嘘,facepath:33_嘘.gif},
{facename:晕,facepath:34_晕.gif},
{facename:折磨,facepath:35_折磨.gif},
{facename:衰,facepath:36_衰.gif},
& x3 t+ g! f2 S{facename:骷髅,facepath:37_骷髅.gif},
' {: N: O$ g9 }{facename:敲打,facepath:38_敲打.gif},
" ]" s4 M2 T1 x4 R  N) {: c1 p4 E1 G{facename:再见,facepath:39_再见.gif},
{facename:擦汗,facepath:40_擦汗.gif},

8 w$ A( l1 [$ A) {1 a- C{facename:抠鼻,facepath:41_抠鼻.gif},
6 F5 j3 ~3 ^" p, I' ]# n{facename:鼓掌,facepath:42_鼓掌.gif},
{facename:糗大了,facepath:43_糗大了.gif},
{facename:坏笑,facepath:44_坏笑.gif},
. z* @6 c0 u3 ?; s6 ]( n- k4 f{facename:左哼哼,facepath:45_左哼哼.gif},
{facename:右哼哼,facepath:46_右哼哼.gif},
{facename:哈欠,facepath:47_哈欠.gif},
{facename:鄙视,facepath:48_鄙视.gif},
3 ~' o" c# Y+ R, c{facename:委屈,facepath:49_委屈.gif},
9 D5 V& b) W& I' Y+ i+ G0 |{facename:快哭了,facepath:50_快哭了.gif},
{facename:阴险,facepath:51_阴险.gif},
{facename:亲亲,facepath:52_亲亲.gif},
' U! y( r  I/ u/ t4 S3 n- x{facename:吓,facepath:53_吓.gif},
+ ~6 w- H8 @; m# E$ K{facename:可怜,facepath:54_可怜.gif},
. Z' l! I0 L9 u$ u$ D; A! t% t6 i{facename:菜刀,facepath:55_菜刀.gif},
6 v! N. m: B5 e0 h. j3 @{facename:西瓜,facepath:56_西瓜.gif},
& z% x' z4 i, W; B1 @" X# D{facename:啤酒,facepath:57_啤酒.gif},
{facename:篮球,facepath:58_篮球.gif},
$ Y4 `$ P. X, f! L* G{facename:乒乓,facepath:59_乒乓.gif},
0 k; x6 m" e9 U' X( Z{facename:拥抱,facepath:78_拥抱.gif},
' c, L* p( ^6 n" E) ^7 B6 j$ T{facename:握手,facepath:81_握手.gif},
: v' H$ p9 w* V8 V1 J{facename:得意地笑,facepath:得意地笑.gif},
% X2 f9 S* R/ s( P4 a7 R{facename:听音乐,facepath:听音乐.gif}
]
,
/ o1 G+ D* [; [$ f  k( Cinit:function(){
var isshowimg=false;
$(.input_text).focusout(function(){
; H% s& Z/ v; v" f; X$(this).parent().css(border-color, #cccccc);
; q2 z: ?3 U# `4 W4 `  _/ l8 B$(this).parent().css(box-shadow, none);
1 |  J; p7 B/ O+ x3 X9 N, f4 \/ M$(this).parent().css(-moz-box-shadow, none);
- U; c2 A% h! Q$ A7 c$(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));
  R6 j, K' M: Q! x  s; g$(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));
4 p6 I* G( ^0 Z" z});
$(.imgbtn).click(function(){
if(isshowimg==false){
isshowimg=true;
- R5 x/ f) ?4 f$(this).parent().prev().animate({margintop:-125px},300);
) x; S8 p# K) B; U8 h2 |if($(.facediv).children().length==0){
5 a/ |5 _6 w( Dfor(var i=0;i<imgiputhandler.facepath.length;i ){
$(.facediv).append(<img title=\ imgiputhandler.facepath.facename \ src=\face/ imgiputhandler.facepath.facepath \ />);
' B+ [. V" @) Y& ?, Y/ z3 S$ o}
$(.facediv>img).click(function(){
' D) k1 j  T1 v8 b" V' L
  [, ]- M$ L& }  k4 yisshowimg=false;
9 ^+ s3 e- l& T# s. S0 {; C$(this).parent().animate({margintop:0px},300);
2 H4 E0 ^' N2 K/ x6 Qimgiputhandler.insertatcursor($(.input_text)[0],[ $(this).attr(title) ]);
- C; C5 c5 }4 D) _2 S});
}
}else{
isshowimg=false;
$(this).parent().prev().animate({margintop:0px},300);
}
});
0 C! h7 p% T0 n( H& n) e' w8 x$(.postbtn).click(function(){
/ q# Y& C3 g2 `9 b/ ualert($(.input_text).val());
: d1 R& D/ V& K' j: \});
},
insertatcursor:function(myfield, myvalue) {
if (document.selection) {
myfield.focus();
sel = document.selection.createrange();
. D! M, k" _* bsel.text = myvalue;
! O, f) K1 z' L( D# Rsel.select();
} else if (myfield.selectionstart || myfield.selectionstart == 0) {
! b0 m  s9 |& U9 ]' x# Ivar startpos = myfield.selectionstart;
var endpos = myfield.selectionend;
  z: }& T& m) c* B# Ivar restoretop = myfield.scrolltop;
myfield.value = myfield.value.substring(0, startpos) myvalue myfield.value.substring(endpos, myfield.value.length);
if (restoretop > 0) {
myfield.scrolltop = restoretop;
* a4 O% M$ h' N2 V8 }2 N}
: @: U$ V$ E' l, K) [- _* tmyfield.focus();
myfield.selectionstart = startpos myvalue.length;
/ Y" _% y/ N  g+ Y# lmyfield.selectionend = startpos myvalue.length;
} else {
9 I; c# g6 ^0 b( _myfield.value = myvalue;
myfield.focus();
}
: J) \6 c% G& Y( v- V$ m( l}
}

( ~6 o6 ~7 h, B/ z
" C2 p/ B2 ]# O更多网页制作信息请查看： 网页制作

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

真是有你的！

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

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

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

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

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

我想骂我自己

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