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

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

/ A! W# J* J/ |/ r+ s! ~! f                               
登录/注册后可看大图

, e3 y0 k7 H$ u5 R5 \' y3 R图2
  O8 q1 _* y) I3 w

                               
登录/注册后可看大图

0 Q( h7 O* T! U4 f# [+ s# f/ Z实现的代码：
html代码：
xml/html code复制内容到剪贴板
3 r  P. {& R7 ^, K$ ]; `% S2 o<div class=main>
8 [' x2 A( q1 C  i6 M% |<div class=input_box>
$ Q& K$ U. C' ~: H+ ~. B<textarea class=input_text></textarea>
& X  c# w2 L% s/ @$ z1 ?<div class=facediv> </div>
<div class=input_foot> <a class=imgbtn href=javascript:void(0);></a><a class=postbtn>确定</a> </div>
</div>
</div>
( d! g; u: n# F& h$ Ccss3代码：
& `; \3 G! @2 B% Ucss code复制内容到剪贴板
% a! E1 }3 Y& ?.input_box {
5 Q4 s: g( W" y+ h1 Fwidth: 495px;
height: 160px;
2 N8 I" V0 E7 v/ |1 Xborder: 1px solid #ccc;
transition: border linear .2s, box-shadow linear .5s;
-moz-transition: border linear .2s, -moz-box-shadow linear .5s;
" S! V2 ?( d/ N0 u. Q-webkit-transition: border linear .2s, -webkit-box-shadow linear .5s;
+ P. N: E( x( E+ ^-moz-border-radius: 5px;
-webkit-border-radius: 5px;
0 i* x' k8 f  [( ?) dborder-radius: 5px;
background-color: #fff;
4 Y! |2 [3 x) ]5 T& Noverflow: hidden;
position: absolute;
! O3 a2 |. @1 b& G, J+ w-moz-box-shadow: 0 0 5px #ccc;
9 b+ ?  M0 Q7 `! H; ~/ `-webkit-box-shadow: 0 0 5px #ccc;
2 ]$ T9 S+ C  z0 Y; ibox-shadow: 0 0 5px #ccc;
7 x1 K3 X6 \3 W}
.input_box>textarea {
& [7 O& n0 N! F7 O* f  Qwidth: 485px;
height: 111px;
padding: 5px;
outline: none;
border: 0px solid #fff;
resize: none;
% r& C; Q# m' K1 w; Ffont: 13px 微软雅黑, arial, helvetica, sans-serif;
' g0 s; M+ n* B3 G/ J, w-moz-border-radius: 5px;
$ t, t0 F5 U) ~-webkit-border-radius: 5px;
7 X6 q9 @  B# }. [/ n$ D) eborder-radius: 5px;
}
.input_foot {
0 l: `# L; _% U: O& w2 a9 C/ {! Ewidth: 100%;
height: 35px;
6 _* \" K/ j1 r  l- u$ tborder-top: 1px solid #ccc;
background-color: #fff;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
position: absolute;
! j1 u+ @2 s  w( I( j4 E2 C}
6 s# J: a0 N! g$ ]% [.imgbtn {
float: left;
9 Q3 V) }9 ~* j( Emargin-top: 8px;
margin-left: 10px;
background-image: url(imgs.png);
background-repeat: no-repeat;
. Z! x& Q* y  F( ?( e7 x# R- L8 J5 Bbackground-position: 0 -13px;
* i. r! I# P' i4 l% Bheight: 18px;
width: 20px;
" X' v0 z  [7 _4 c# v/ \cursor: pointer
* J4 ]; Y. Y/ E/ L}
.imgbtn:active {
( J9 m6 A1 |" ?$ M' umargin-top: 9px;
}
.imgbtn:hover {
5 r' e1 v8 c0 U  h  b$ V3 Xbackground-position: 0 -31px
}
  @" N+ v0 v: z/ @- D.postbtn {
float: rightright;
font: 13px 微软雅黑, arial, helvetica, sans-serif;
: j- y+ W3 o6 r: e5 Z& v( e! Lcolor: #808080;
+ j- b/ [0 V' Qpadding: 9px 20px 7px 20px;
border-left: 1px solid #ccc;
cursor: pointer;
5 g! `! ^" U4 E- ?4 O" k5 Z$ h& [-moz-border-radius: 0 0 5px 0;
-webkit-border-radius: 0 0 5px 0;
3 k3 O* V# s+ }# [border-radius: 0 0 5px 0;
}
.postbtn:hover {
color: #333;
background-color: #efefef;
2 L5 ]1 i( D5 j- V+ _}
' S( I7 F8 K1 R- l9 d  |.postbtn:active {
& X$ T" l2 h6 ^% T' u) W1 vpadding: 10px 20px 6px 20px;
}
.facediv {
1 e5 d& T* N. y+ @) j# Rwidth: 500px;
height: 120px;
border-top: 1px solid #ccc;
position: absolute;
background-color: #fff;
" ~- G' o# [4 j' Q% p3 O-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
. e) B5 h7 E# w) F3 \# F3 ~, z+ ^border-radius: 5px 5px 0 0;
; g# W) s2 J$ {) Q% k$ C}
, P* p' t/ J  `.facediv>img {
% @* l9 t) N! b1 c6 Y& e. cborder: 1px solid #ccc;
float: left;
( m: Y6 {. U+ e  `margin-left: -1px;
3 H& T& x9 i! m6 ]0 U8 cmargin-top: -1px;
position: relative;
1 Y4 b5 p5 I' T( V- }/ @8 C+ owidth: 24px;
height: 24px;
padding: 3px 3px 3px 3px;
cursor: pointer;
}
.facediv>img:hover {
background-color: #efefef;
4 T% Y! H( q8 a- r}
.facediv>img:active {
. `; L; f! b& ~' p+ u  r5 N. ypadding: 4px 3px 2px 3px;
. k- |% A( _$ Y/ E9 G/ s! k}
javascript代码:
javascript code复制内容到剪贴板
var imgiputhandler={
% p+ L! A2 |: ]% T; Ffacepath:[
{facename:微笑,facepath:0_微笑.gif},
5 L. E8 T! `; G1 ^% x; J{facename:撇嘴,facepath:1_撇嘴.gif},
9 P9 S( [# ^) D0 ]{facename:色,facepath:2_色.gif},
/ ^; Z& C* z% v+ o. T: @{facename:发呆,facepath:3_发呆.gif},
2 z6 Y3 P6 u% Q5 h( M: W{facename:得意,facepath:4_得意.gif},
0 i* }/ F- w; _% j1 H{facename:流泪,facepath:5_流泪.gif},
, u, T, a1 s, S* A! R; p{facename:害羞,facepath:6_害羞.gif},
1 V3 x) k0 k2 U. L{facename:闭嘴,facepath:7_闭嘴.gif},
" {4 |# U5 ~2 ?2 H* c' y{facename:大哭,facepath:9_大哭.gif},
{facename:尴尬,facepath:10_尴尬.gif},
{facename:发怒,facepath:11_发怒.gif},
{facename:调皮,facepath:12_调皮.gif},
{facename:龇牙,facepath:13_龇牙.gif},
) z! k0 h2 Y0 ?! E3 S5 P{facename:惊讶,facepath:14_惊讶.gif},
{facename:难过,facepath:15_难过.gif},
: y$ V6 g1 P8 D) {6 P5 }{facename:酷,facepath:16_酷.gif},
{facename:冷汗,facepath:17_冷汗.gif},
{facename:抓狂,facepath:18_抓狂.gif},
* k* X* C, o9 K. U2 v{facename:吐,facepath:19_吐.gif},
( M- L$ @7 h3 h4 U" ]- `! e{facename:偷笑,facepath:20_偷笑.gif},
3 h* F9 v# P! k4 H0 m7 c: D& y& E{facename:可爱,facepath:21_可爱.gif},
{facename:白眼,facepath:22_白眼.gif},
! E2 w6 x1 V$ ~  M( j) z9 a# O{facename:傲慢,facepath:23_傲慢.gif},
{facename:饥饿,facepath:24_饥饿.gif},
: B' ~* j6 g2 K. C6 O9 s7 S+ n8 X{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},
3 {7 e7 a' x; ~- e- w2 P{facename:疑问,facepath:32_疑问.gif},
' d- |- y% A8 n( }% i" C4 _2 Z{facename:嘘,facepath:33_嘘.gif},
{facename:晕,facepath:34_晕.gif},
; L6 ^$ k3 R3 {$ t! i5 o" I3 J{facename:折磨,facepath:35_折磨.gif},
3 L! ]6 d, J* h" |; X{facename:衰,facepath:36_衰.gif},
( E+ I  p. p. [" B{facename:骷髅,facepath:37_骷髅.gif},
' u( _! D0 p$ U, a{facename:敲打,facepath:38_敲打.gif},
{facename:再见,facepath:39_再见.gif},
{facename:擦汗,facepath:40_擦汗.gif},
# N) E  J/ P* ]
{facename:抠鼻,facepath:41_抠鼻.gif},
{facename:鼓掌,facepath:42_鼓掌.gif},
% ]! t& B: |9 H& }. d5 e6 Q{facename:糗大了,facepath:43_糗大了.gif},
{facename:坏笑,facepath:44_坏笑.gif},
# N0 k3 a/ d# W/ N$ E( b3 m, o( Y{facename:左哼哼,facepath:45_左哼哼.gif},
- B# ^4 D4 o* r- y1 l. X' K9 v{facename:右哼哼,facepath:46_右哼哼.gif},
{facename:哈欠,facepath:47_哈欠.gif},
{facename:鄙视,facepath:48_鄙视.gif},
7 S" F3 F# O3 P: \- s: A( D{facename:委屈,facepath:49_委屈.gif},
{facename:快哭了,facepath:50_快哭了.gif},
* O0 R3 L( J/ a8 \{facename:阴险,facepath:51_阴险.gif},
* c" R/ N' B: @# C# X{facename:亲亲,facepath:52_亲亲.gif},
{facename:吓,facepath:53_吓.gif},
{facename:可怜,facepath:54_可怜.gif},
{facename:菜刀,facepath:55_菜刀.gif},
{facename:西瓜,facepath:56_西瓜.gif},
{facename:啤酒,facepath:57_啤酒.gif},
8 R4 `& B" {' C% G) I3 h{facename:篮球,facepath:58_篮球.gif},
) V3 |2 A6 b/ U. ~- I{facename:乒乓,facepath:59_乒乓.gif},
{facename:拥抱,facepath:78_拥抱.gif},
{facename:握手,facepath:81_握手.gif},
{facename:得意地笑,facepath:得意地笑.gif},
* o# y" @1 K7 V3 C( `( R$ B{facename:听音乐,facepath:听音乐.gif}
8 r. U; F* Z- ^/ I' Y# Z8 l2 f# []
,
init:function(){
2 @  d9 a. ]1 Y1 \5 nvar isshowimg=false;
) I. K" j7 t- Q/ e/ j$(.input_text).focusout(function(){
$(this).parent().css(border-color, #cccccc);
$(this).parent().css(box-shadow, none);
" h6 N0 t6 D; e, Q$ I8 D; u$(this).parent().css(-moz-box-shadow, none);
$(this).parent().css(-webkit-box-shadow, none);
5 N4 e5 n2 B1 S1 G0 I0 X4 k6 ^});
6 b+ p+ \; J/ J& c5 l! m3 F$(.input_text).focus(function(){
3 `) F$ G0 Q) w5 i; s' _, m$(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));
});
' B' }$ L9 k! t: o& C8 O) c$(.imgbtn).click(function(){
if(isshowimg==false){
isshowimg=true;
$(this).parent().prev().animate({margintop:-125px},300);
  y: [0 K# V$ w  Iif($(.facediv).children().length==0){
( w* K: `  R5 qfor(var i=0;i<imgiputhandler.facepath.length;i ){
$(.facediv).append(<img title=\ imgiputhandler.facepath.facename \ src=\face/ imgiputhandler.facepath.facepath \ />);
}
$(.facediv>img).click(function(){

: R3 p* W5 J- |$ ?$ P( \8 Lisshowimg=false;
: p6 L" i0 |( d' d% E6 \: |9 F$(this).parent().animate({margintop:0px},300);
; ?) q4 e* B8 J; t/ q7 ]% i( x9 b& ?8 ximgiputhandler.insertatcursor($(.input_text)[0],[ $(this).attr(title) ]);
});
8 ~' p( U/ E! K9 c( f: a}
" d+ Z/ J8 o: w% E9 ~: @+ B7 r, L8 [}else{
isshowimg=false;
6 j3 a6 j$ }4 J$(this).parent().prev().animate({margintop:0px},300);
}
% A/ n7 `5 P% H. k: K9 S, d});
$(.postbtn).click(function(){
7 `( ^/ s6 I/ S8 N+ Talert($(.input_text).val());
6 y' M, Q& W3 Q/ ]" e( T* T});
' J9 f8 I4 s; P, m/ ^7 E; t},
& f5 t, [3 C* v7 F: E) V7 oinsertatcursor:function(myfield, myvalue) {
if (document.selection) {
! s6 @$ H# T. ~1 H- f5 Bmyfield.focus();
# u9 }* v& E# U4 U5 psel = document.selection.createrange();
sel.text = myvalue;
sel.select();
} else if (myfield.selectionstart || myfield.selectionstart == 0) {
var startpos = myfield.selectionstart;
var endpos = myfield.selectionend;
. r* O& {% k! |* f% Q2 Q* S5 V- C, vvar restoretop = myfield.scrolltop;
myfield.value = myfield.value.substring(0, startpos) myvalue myfield.value.substring(endpos, myfield.value.length);
if (restoretop > 0) {
myfield.scrolltop = restoretop;
, m1 x  A* f$ q/ Z! P9 M}
myfield.focus();
myfield.selectionstart = startpos myvalue.length;
myfield.selectionend = startpos myvalue.length;
# e% c; t0 W8 s8 X$ f/ w: p} else {
myfield.value = myvalue;
0 `' O. a+ J! M+ ymyfield.focus();
}
$ g  ?! I/ B- E; C}
& N) @5 m0 Z7 h1 M}

2 I; k! w, a7 x6 N2 W4 w
+ K2 w* O% y$ M- k更多网页制作信息请查看： 网页制作

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

真是有你的！

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

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

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

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

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

我想骂我自己

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