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

前端  /  管理员 发布于 7年前   255

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

图1

图2

　　实现的代码：

　　html代码：

XML/HTML Code复制内容到剪贴板

1. <div class="Main">     
2.          <div class="Input_Box">     
3.            <textarea class="Input_text"></textarea>     
4.            <div class="faceDiv"> </div>     
5.            <div class="Input_Foot"> <a class="imgBtn" href="javascript:void(0);"></a><a class="postBtn">确定</a> </div>     
6.          </div>     
7.        </div>    

　　css3代码：

CSS Code复制内容到剪贴板

1. .Input_Box {     
2.     width: 495px;     
3.     height: 160px;     
4.     border: 1px solid #ccc;     
5.     transition: border linear .2s, box-shadow linear .5s;     
6.     -moz-transition: border linear .2s, -moz-box-shadow linear .5s;     
7.     -webkit-transition: border linear .2s, -webkit-box-shadow linear .5s;     
8.     -moz-border-radius: 5px;     
9.     -webkit-border-radius: 5px;     
10.     border-radius: 5px;     
11.     background-color: #fff;     
12.     overflow: hidden;     
13.     position: absolute;     
14.     -moz-box-shadow: 0 0 5px #ccc;     
15.     -webkit-box-shadow: 0 0 5px #ccc;     
16.     box-shadow: 0 0 5px #ccc;     
17. }     
18. .Input_Box>textarea {     
19.     width: 485px;     
20.     height: 111px;     
21.     padding: 5px;     
22.     outline: none;     
23.     border: 0px solid #fff;     
24.     resize: none;     
25.     font: 13px "微软雅黑", Arial, Helvetica, sans-serif;     
26.     -moz-border-radius: 5px;     
27.     -webkit-border-radius: 5px;     
28.     border-radius: 5px;     
29. }     
30. .Input_Foot {     
31.     width: 100%;     
32.     height: 35px;     
33.     border-top: 1px solid #ccc;     
34.     background-color: #fff;     
35.     -moz-border-radius: 0 0 5px 5px;     
36.     -webkit-border-radius: 0 0 5px 5px;     
37.     border-radius: 0 0 5px 5px;     
38.     position: absolute;     
39. }     
40. .imgBtn {     
41.     float: left;     
42.     margin-top: 8px;     
43.     margin-left: 10px;     
44.     background-image: url(imgs.png);     
45.     background-repeat: no-repeat;     
46.     background-position: 0 -13px;     
47.     height: 18px;     
48.     width: 20px;     
49.     cursor: pointer     
50. }     
51. .imgBtn:active {     
52.     margin-top: 9px;     
53. }     
54. .imgBtn:hover {     
55.     background-position: 0 -31px     
56. }     
57. .postBtn {     
58.     float: rightright;     
59.     font: 13px "微软雅黑", Arial, Helvetica, sans-serif;     
60.     color: #808080;     
61.     padding: 9px 20px 7px 20px;     
62.     border-left: 1px solid #ccc;     
63.     cursor: pointer;     
64.     -moz-border-radius: 0 0 5px 0;     
65.     -webkit-border-radius: 0 0 5px 0;     
66.     border-radius: 0 0 5px 0;     
67. }     
68. .postBtn:hover {     
69.     color: #333;     
70.     background-color: #efefef;     
71. }     
72. .postBtn:active {     
73.     padding: 10px 20px 6px 20px;     
74. }     
75. .faceDiv {     
76.     width: 500px;     
77.     height: 120px;     
78.     border-top: 1px solid #ccc;     
79.     position: absolute;     
80.     background-color: #fff;     
81.     -moz-border-radius: 5px 5px 0 0;     
82.     -webkit-border-radius: 5px 5px 0 0;     
83.     border-radius: 5px 5px 0 0;     
84. }     
85. .faceDiv>img {     
86.     border: 1px solid #ccc;     
87.     float: left;     
88.     margin-left: -1px;     
89.     margin-top: -1px;     
90.     position: relative;     
91.     width: 24px;     
92.     height: 24px;     
93.     padding: 3px 3px 3px 3px;     
94.     cursor: pointer;     
95. }     
96. .faceDiv>img:hover {     
97.     background-color: #efefef;     
98. }     
99. .faceDiv>img:active {     
100.     padding: 4px 3px 2px 3px;     
101. }    

　　Javascript代码:

JavaScript Code复制内容到剪贴板

1. var ImgIputHandler={     
2.     facePath:[     
3.         {faceName:"微笑",facePath:"0_微笑.gif"},     
4.         {faceName:"撇嘴",facePath:"1_撇嘴.gif"},     
5.         {faceName:"色",facePath:"2_色.gif"},     
6.         {faceName:"发呆",facePath:"3_发呆.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:"发怒",facePath:"11_发怒.gif"},     
14.         {faceName:"调皮",facePath:"12_调皮.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:"偷笑",facePath:"20_偷笑.gif"},     
23.         {faceName:"可爱",facePath:"21_可爱.gif"},     
24.         {faceName:"白眼",facePath:"22_白眼.gif"},     
25.         {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:"大兵",facePath:"29_大兵.gif"},     
32.         {faceName:"奋斗",facePath:"30_奋斗.gif"},     
33.         {faceName:"咒骂",facePath:"31_咒骂.gif"},     
34.         {faceName:"疑问",facePath:"32_疑问.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:"38_敲打.gif"},     
41.         {faceName:"再见",facePath:"39_再见.gif"},     
42.         {faceName:"擦汗",facePath:"40_擦汗.gif"},     
43.              
44.         {faceName:"抠鼻",facePath:"41_抠鼻.gif"},     
45.         {faceName:"鼓掌",facePath:"42_鼓掌.gif"},     
46.      &nb