利⽤HTML、CSS实现带表情的评论框的制作教程
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. {faceName:"糗⼤了",facePath:"43_糗⼤了.gif"},
47. {faceName:"坏笑",facePath:"44_坏笑.gif"},
48. {faceName:"左哼哼",facePath:"45_左哼哼.gif"},
49. {faceName:"右哼哼",facePath:"46_右哼哼.gif"},
50. {faceName:"哈⽋",facePath:"47_哈⽋.gif"},
51. {faceName:"鄙视",facePath:"48_鄙视.gif"},
52. {faceName:"委屈",facePath:"49_委屈.gif"},
53. {faceName:"快哭了",facePath:"50_快哭了.gif"},
54. {faceName:"阴险",facePath:"51_阴险.gif"},
55. {faceName:"亲亲",facePath:"52_亲亲.gif"},
56. {faceName:"吓",facePath:"53_吓.gif"},
57. {faceName:"可怜",facePath:"54_可怜.gif"},
58. {faceName:"菜⼑",facePath:"55_菜⼑.gif"},
59. {faceName:"西⽠",facePath:"56_西⽠.gif"},
60. {faceName:"啤酒",facePath:"57_啤酒.gif"},
61. {faceName:"篮球",facePath:"58_篮球.gif"},
62. {faceName:"乒乓",facePath:"59_乒乓.gif"},
63. {faceName:"拥抱",facePath:"78_拥抱.gif"},
64. {faceName:"握⼿",facePath:"81_握⼿.gif"},
65. {faceName:"得意地笑",facePath:"得意地笑.gif"},
66. {faceName:"听⾳乐",facePath:"听⾳乐.gif"}
67. ]
68. ,
69. Init:function(){
70. var isShowImg=false;
71. $(".Input_text").focusout(function(){borderbox
72. $(this).parent().css("border-color", "#cccccc");
73. $(this).parent().css("box-shadow", "none");
74. $(this).parent().css("-moz-box-shadow", "none");
75. $(this).parent().css("-webkit-box-shadow", "none");
76. });
77. $(".Input_text").focus(function(){
78. $(this).parent().css("border-color", "rgba(19,105,172,.75)");
79. $(this).parent().css("box-shadow", "0 0 3px rgba(19,105,192,.5)");
80. $(this).parent().css("-moz-box-shadow", "0 0 3px rgba(241,39,232,.5)");
81. $(this).parent().css("-webkit-box-shadow", "0 0 3px rgba(19,105,252,3)");
82. });
83. $(".imgBtn").click(function(){
84. if(isShowImg==false){
85. isShowImg=true;
86. $(this).parent().prev().animate({marginTop:"-125px"},300);
87. if($(".faceDiv").children().length==0){
88. for(var i=0;i<ImgIputHandler.facePath.length;i ){
89. $(".faceDiv").append("
<img title=\"" ImgIputHandler.facePath[i].faceName "\" src=\"face/" ImgIputHandler.facePath[i].facePath "\" />");
90. }
91. $(".faceDiv>img").click(function(){
92.
93. isShowImg=false;
94. $(this).parent().animate({marginTop:"0px"},300);
95. ImgIputHandler.insertAtCursor($(".Input_text")[0],"[" $(this).attr("title") "]");
96. });
97. }
98. }else{
99. isShowImg=false;
100. $(this).parent().prev().animate({marginTop:"0px"},300);
101. }
102. });
103. $(".postBtn").click(function(){
104. alert($(".Input_text").val());
105. });
106. },
107. insertAtCursor:function(myField, myValue) {
108. if (document.selection) {
109. myField.focus();
110. sel = ateRange();
111. = myValue;
112. sel.select();
113. } else if (myField.selectionStart || myField.selectionStart == "0") {
114. var startPos = myField.selectionStart;
115. var endPos = myField.selectionEnd;
116. var restoreTop = myField.scrollTop;
117. myField.value = myField.value.substring(0, startPos) myValue myField.value.substring(endPos, myField.value.length); 118. if (restoreTop > 0) {
119. myField.scrollTop = restoreTop;
120. }
121. myField.focus();
122. myField.selectionStart = startPos myValue.length;
123. myField.selectionEnd = startPos myValue.length;
124. } else {
125. myField.value = myValue; 126. myField.focus();
127. }
128. }
129. }
发表评论