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

swmozowtfl · *发表于* 2015-7-12 16:09:11

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

登录/注册后可看大图

图2

登录/注册后可看大图

实现的代码：
html代码：
xml/html code复制内容到剪贴板
<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>
css3代码：
css code复制内容到剪贴板
.input_box {
width: 495px;
height: 160px;
border: 1px solid #ccc;
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;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
background-color: #fff;
overflow: hidden;
position: absolute;
-moz-box-shadow: 0 0 5px #ccc;
-webkit-box-shadow: 0 0 5px #ccc;
box-shadow: 0 0 5px #ccc;
}
.input_box>textarea {
width: 485px;
height: 111px;
padding: 5px;
outline: none;
border: 0px solid #fff;
resize: none;
font: 13px 微软雅黑, arial, helvetica, sans-serif;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.input_foot {
width: 100%;
height: 35px;
border-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;
}
.imgbtn {
float: 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: pointer
}
.imgbtn:active {
margin-top: 9px;
}
.imgbtn:hover {
background-position: 0 -31px
}
.postbtn {
float: rightright;
font: 13px 微软雅黑, arial, helvetica, sans-serif;
color: #808080;
padding: 9px 20px 7px 20px;
border-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;
}
.facediv {
width: 500px;
height: 120px;
border-top: 1px solid #ccc;
position: absolute;
background-color: #fff;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
.facediv>img {
border: 1px solid #ccc;
float: left;
margin-left: -1px;
margin-top: -1px;
position: relative;
width: 24px;
height: 24px;
padding: 3px 3px 3px 3px;
cursor: pointer;
}
.facediv>img:hover {
background-color: #efefef;
}
.facediv>img:active {
padding: 4px 3px 2px 3px;
}
javascript代码:
javascript code复制内容到剪贴板
var imgiputhandler={
facepath:[
{facename:微笑,facepath:0_微笑.gif},
{facename:撇嘴,facepath:1_撇嘴.gif},
{facename:色,facepath:2_色.gif},
{facename:发呆,facepath:3_发呆.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:发怒,facepath:11_发怒.gif},
{facename:调皮,facepath:12_调皮.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.facename \ src=\face/ imgiputhandler.facepath.facepath \ />);
( E- z0 W0 f2 u% U' ~}
, ?5 `! H5 b! o4 b* D$(.facediv>img).click(function(){ : e  S# Z& v; v. B2 \/ X4 `

' _, _+ ^( f5 j" G) a/ U# v$ H3 xisshowimg=false; 6 b9 l7 W& r' S& B: ~0 _7 T
$(this).parent().animate({margintop:0px},300);
/ f; Y5 M: X/ `4 e4 E; Zimgiputhandler.insertatcursor($(.input_text)[0],[ $(this).attr(title) ]);
" T: h2 Z& |) {# ]5 U});
% F2 Z  S, c$ \' y& y, X+ L}
2 X* J. J8 D$ I  S}else{ $ e* k3 v+ V5 G
isshowimg=false;   q3 Q* X/ j: R7 s0 F
$(this).parent().prev().animate({margintop:0px},300); . `* w! d0 M- v, ?# M. h4 F$ k( F# n
}
+ I  p( O6 S: O, w* i$ [' y9 x' h4 s}); 7 g/ N) J. A7 `$ ?& u; [3 j* c1 m
$(.postbtn).click(function(){
& v: \! s1 _: ^( ^& yalert($(.input_text).val()); # r6 W, p( r1 T9 t+ r
}); + B/ Z7 O  N" Y- t* V9 W8 G; H
},
+ Z, m9 ^4 z' r9 s$ L, M8 @- a; Qinsertatcursor:function(myfield, myvalue) { 0 J! @- q$ M. D* H! i7 J4 [$ l9 U7 C
if (document.selection) { # A* A7 ~0 K3 Y% |* [( N
myfield.focus(); 5 M( i7 i2 i* F" v$ R
sel = document.selection.createrange();
  U% x; T% v6 h+ i0 o; Tsel.text = myvalue; , U# a) D; }" ?4 D4 z1 E
sel.select(); : P3 c+ _% o7 H1 C: h
} else if (myfield.selectionstart || myfield.selectionstart == 0) {
" W6 Y, Z! l* S: {* @. ]var startpos = myfield.selectionstart;
5 I/ E- ~# d4 c2 |+ n% Svar endpos = myfield.selectionend; ( Q+ k9 v/ H6 _) z
var restoretop = myfield.scrolltop;
3 r- {! w& |, D  r2 P2 Nmyfield.value = myfield.value.substring(0, startpos) myvalue myfield.value.substring(endpos, myfield.value.length);
5 ~' h$ \3 ^1 @8 W- |/ I7 Vif (restoretop > 0) { . o2 v- M% h4 _( P- {6 k: g" o. |
myfield.scrolltop = restoretop;
% H& [7 z7 i- p/ d} # l7 g, |, O, p
myfield.focus();
; G3 U9 n; ?; F  g* {2 |) Lmyfield.selectionstart = startpos myvalue.length;
' ]0 f1 g/ p) ~- @0 u8 imyfield.selectionend = startpos myvalue.length;
2 ^5 E4 }# K! M& E$ V# c} else { 7 K2 k. S% @" E8 b
myfield.value = myvalue; ; J6 T' v" ]2 x# p7 W5 Y: Y
myfield.focus();
5 J. B; g( w4 v2 L1 G" N; K4 I}
  l: S, i8 h: [# x* @! D5 b}
  d/ a8 e( K& V8 B} : x9 z& O6 v& j! x% n/ F

  R& C% C# T' r; S
; a* l$ `: f) X6 |: F( N8 n, @- A更多网页制作信息请查看：网页制作

alapScady · *发表于* 2015-9-24 10:20:58

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

buingeEvineus · *发表于* 2015-9-24 10:21:08

真是有你的！

effoggikeftor · *发表于* 2015-9-24 10:21:16

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

GoodyFouppy · *发表于* 2015-9-24 10:21:24

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

seazvyt · *发表于* 2015-9-27 19:05:32

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

tohme · *发表于* 2015-9-27 19:05:49

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

buingeEvineus · *发表于* 2015-9-27 19:06:10

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

buingeEvineus · *发表于* 2015-9-27 19:06:19

我想骂我自己

tohme · *发表于* 2015-9-27 19:06:45

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

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

回复|共 9 个

回复

浏览过的版块

快捷导航