HTML과 CSS_HTML/Xhtml_웹페이지 제작을 활용하여 이모티콘이 포함된 댓글 상자를 만드는 방법에 대한 튜토리얼

이모티콘이 포함된 HTML 주석 상자입니다. 이모티콘은 Json 데이터를 통해 로드되며, 자신의 기본 설정에 따라 이모티콘을 변경할 수 있습니다. 이 댓글창의 코드는 HTML, CSS, JQ 코드입니다. 그림 1은 원래 상태를 보여주고, 그림 2는 표현식을 클릭했을 때 나타나는 표현식 목록을 보여줍니다. 하나 이상을 마음대로 선택할 수 있습니다. 구현된 코드를 살펴보겠습니다.

사진 1

사진 2

구현된 코드:

　html 코드:

XML/HTML 코드클립보드에 콘텐츠 복사

1. <div class="메인" > 
2.  <div class="Input_Box" > 
3.  <텍스트 영역 class="Input_text" >텍스트 영역> 
4.  <div class="faceDiv" > div>
 
5. <div class="Input_Foot" > <아 수업="imgBtn" href="javascript:void(0);"> ;아><아 class="postBtn">OKa > div>  
div>   div>  　

css3 코드:

CSS 코드

클립보드에 콘텐츠 복사

1. .Input_Box {     
2.     너비: 495px;     
3.     높이: 160px;     
4.     테두리: 1px 단단함 #ccc;     
5.     전환: 테두리 선형 .2s, 상자 그림자 선형 .5s;     
6.     -moz-transition: 테두리 선형 .2s, -moz-box-shadow 선형 .5s;     
7.     -webkit-transition: 테두리 선형 .2s, -webkit-box-shadow 선형 .5s;     
8.     -moz-테두리-반경: 5px;     
9.     -webkit-테두리-반경: 5px;     
10.     테두리-반경: 5px;     
11.     배경색: #fff;     
12.     오버플로: 숨김;     
13.     위치: 절대;     
14.     -moz-box-shadow: 0 0 5px #ccc;     
15.     -webkit-box-shadow: 0 0 5px #ccc;     
16.     상자 그림자: 0 0 5px #ccc;     
17. }     
18. .Input_Box>텍스트 영역 {     
19.     너비: 485px;     
20.     높이: 111px;     
21.     패딩: 5px;     
22.     개요: 없음;     
23.     테두리: 0px 단단함 #fff;     
24.     크기 조정: 없음;     
25.     글꼴: 13px "微软雅黑" , Arial, Helvetica, sans-serif;     
26.     -moz-테두리-반경: 5px;     
27.     -webkit-테두리-반경: 5px;     
28.     테두리-반경: 5px;     
29. }     
30. .Input_Foot {     
31.     너비: 100%;     
32.     높이: 35px;     
33.     테두리 상단: 1px 단색#ccc;     
34.     배경색: #fff;     
35.     -moz-테두리-반경: 0 0 5픽셀 5픽셀 ;     
36.     -webkit-테두리-반경: 0 0 5픽셀 5픽셀 ;     
37.     테두리-반경: 0 0 5픽셀 5픽셀 ;     
38.     위치: 절대;     
39. }     
40. .imgBtn {     
41.     플로트: 왼쪽;     
42.     여백 상단: 8px;     
43.     왼쪽 여백: 10px;     
44.     배경 이미지: url(imgs.png);     
45.     백그라운드 반복: 반복 없음;     
46.     배경 위치: 0 -13px;     
47.     높이: 18px;     
48.     너비: 20px;     
49.     커서: 포인터     
50. }     
51. .imgBtn:활성 {     
52.     여백 상단: 9px;     
53. }     
54. .imgBtn:hover {     
55.     배경 위치: 0 -31px     
56. }     
57. .postBtn {     
58.     플로트: 오른쪽오른쪽;     
59.     글꼴: 13px "微软雅黑" , Arial, Helvetica, sans-serif;     
60.     색상: #808080;     
61.     패딩: 9px 20px 7픽셀 20픽셀;     
62.     왼쪽 테두리: 1px 단색#ccc;     
63.     커서: 포인터;     
64.     -moz-테두리-반경: 0 0 5px 0;     
65.     -webkit-테두리-반경: 0 0 5px 0;     
66.     테두리-반경: 0 0 5px 0;     
67. }     
68. .postBtn:hover {     
69.     색상: #333;     
70.     배경색: #efefef;     
71. }     
72. .postBtn:활성 {     
73.     패딩: 10px 20px 6픽셀 20픽셀;     
74. }     
75. .faceDiv {     
76.     너비: 500px;     
77.     높이: 120px;     
78.     테두리 상단: 1px 단색#ccc;     
79.     위치: 절대;     
80.     배경색: #fff;     
81.     -moz-테두리-반경: 5픽셀 5픽셀 0 0;     
82.     -webkit-테두리-반경: 5px 5px 0 0;     
83.     테두리-반경: 5px 5px 0 0 ;     
84. }     
85. .faceDiv>img {     
86.     테두리: 1px 단단함 #ccc;     
87.     플로트: 왼쪽;     
88.     왼쪽 여백: -1px;     
89.     여백 상단: -1px;     
90.     직위: 친척;     
91.     너비: 24px;     
92.     높이: 24px;     
93.     패딩: 3px 3px 3픽셀 3픽셀;     
94.     커서: 포인터;     
95. }     
96. .faceDiv>img:hover { 
97.  배경색: #effefef; 
98. } 
99. .faceDiv>img:active { 
100. 패딩: 4px 3px 2픽셀 3픽셀;
} 

　

자바스크립트 코드:

JavaScript 코드

클립보드에 콘텐츠 복사

1. var ImgIputHandler={ 
2. 얼굴 경로:[
3. {faceName:"미소",facePath:"0_smile.gif"}, 
4. {FACENAME: "🎜> , Facepath: " 1_ 撇 撇 .gif " > {faceName:
"color"
5. ,facePath:"2_color.gif"},  {FACENAME: "Duke"
6. , Facepath: "3_ Duke .gif" }, {faceName:"Deyi"
7. ,facePath:"4_Deyi.gif"},                                                                                                                        >
{faceName:
8. "shy",facePath:"6_shy.gif"}, 
{faceName:
9. "닥쳐", FacePath:"7_Shut up.gif"},
{faceName:
10. "울음", FacePath:"9_crying.gif"},
{faceName:
11. "어색함",facePath:"10_awkward.gif"}, 
{faceName:
12. "화가",facePath:"11_angry.gif"},  {FACENAME:
13. "Naughty" , FacePath: "12_ 皮 .gif" }, {faceName:
14. "바티스",facePath:"13_Bargain.gif"}, {faceName:
15. "놀라움",facePath:"14_surprise.gif"},  {faceName:
16. "슬픈",facePath:"15_sad.gif"},  {faceName:
17. "멋져요",facePath:"16_cool.gif"},  {faceName:
18. "식은땀",facePath:"17_Cold Sweat.gif"}, > {faceName:
"미쳤어"
19. ,facePath:"18_Crazy.gif"}, 
20. {faceName:"토하다",facePath:"19_vomit.gif"}, 
21. {FACENAME: "웃는 중" , FacePath: "20_linking .gif" },
22. {faceName:"귀엽다",facePath:"21_cute.gif"}, 
23. {faceName:"White Eyes",facePath:"22_White Eyes.gif"}, 
24. {faceName:"오만",facePath:"23_arrogance.gif"}, 
25. {faceName:"배고픔",facePath:"24_hunger.gif"}, 
26. {faceName:"갇힌",facePath:"25_trapped.gif"}, 
27. {faceName:"공포",facePath:"26_Horror.gif"}, 
28. {faceName:"땀", FacePath:"27_sweat.gif"},
{FACENAME:
29. "憨" , Facepath: "28_ 憨 笑 .gif" },
{faceName:
30. "GI",facePath:"29_GI.gif"}, 
{faceName:
31. "투쟁",facePath:"30_struggle.gif"}, 
{faceName:
32. "저주",facePath:"31_curse.gif"}, 
{faceName:
33. "질문",facePath:"32_question.gif"}, 
{faceName:
34. "Sh",facePath:"33_boo.gif"}, 
{faceName:
35. "halo",facePath:"34_halo.gif"}, 
{faceName:
36. "고문",facePath:"35_torture.gif"},  {FACENAME:
37. "거절" , FacePath: "36_ 衰 .gif" }, {faceName:
38. "스켈레톤",facePath:"37_skeleton.gif"}, 
39. {FACENAME: "탭" , Facepath: "38_ hit .gif" },
40. {faceName:"안녕",facePath:"39_Goodbye.gif"}, 
41. {faceName:"땀 닦기", FacePath:"40_wipe sweat.gif"},
42.                                          {faceName:
43. "코 따기", facePath:"41_코 따기.gif"}, {faceName:
44. "박수",facePath:"42_Applause.gif"},  {faceName:
45. "너무 부끄러워요", FacePath:"43_부끄러워요.gif" },  {faceName:
46. "나쁜 미소", FacePath:"44_bad smile.gif"}, {faceName:
47. "Zuo Hengheng", FacePath:"45_left Hengheng.gif" },  {FACENAME:
"Right Hum"
48. , FacePath: "46_ right hum .gif" },  {faceName:
"하품"
49. ,facePath:"47_yawn.gif"},  {faceName:
"경멸"
50. ,facePath:"48_Contempt.gif"},  {faceName:
"불만"
51. ,facePath:"49_grievance.gif"},  {faceName:
"울 것 같아"
52. , FacePath:"50_울 것 같아.gif" },  {faceName:
"inidious"
53. ,facePath:"51_insidious.gif"},  {faceName:
"키스"
54. , FacePath:"52_Kiss.gif"}, {FACENAME: "무서움"
55. , Facepath: "53_ <.gif class="string"> }, {faceName:"나쁨"
56. ,facePath:"54_Poor.gif"},  {faceName:"Chop Knife"
57. ,facePath:"55_Chop Knife.gif"},  {faceName:"수박"
58. ,facePath:"56_watermelon.gif"}, 
59. {faceName:"맥주",facePath:"57_beer.gif"}, 
60. {faceName:"농구",facePath:"58_basketball.gif"}, 
61. {faceName:"pingpong",facePath:"59_pingpong.gif"}, 
62. {faceName:"포옹",facePath:"78_hug.gif"}, 
63. {faceName:"Handshake",facePath:"81_Handshake.gif"}, 
64. {faceName:"smiling smugly", facePath:"smiling smugly.gif"},
65. {faceName:"음악 듣기",facePath:"Listen to music.gif"} 
66. ]
67. , ,
68. 초기화:함수(){
69.  var isShowImg=false; 
70. $(".Input_text").focusout(함수(){
71. $(this).parent().css("border-color", "#cccccc");
$(
72. 이것).parent().css("box-shadow", "없음")
$(
73. 이것).parent().css("-moz-box-shadow", "없음"); $(
이
74. ).parent().css("-webkit-box-shadow", "없음"); });     
75.         $(".Input_text").focus(기능(){     
76.         $(이것).parent().css("border-color",  "rgba(19,105,172,.75)");     
77.         $(이것).parent().css("box-shadow",  "0 0 3px rgba(19,105,192,.5)");     
78.         $(이것).parent().css("-moz-box-shadow", "0 0 3px rgba(241,39,232,.5)");     
79.         $(이것).parent().css("-webkit-box-shadow", "0 0 3px rgba(19,105,252,3)");     
80.         });     
81.         $(".imgBtn").click(기능(){     
82.            if(isShowImg==false){     
83.                 isShowImg=true;     
84.                $(이것).parent().prev().animate({marginTop:"-125px"},300);     
85.                if($(".faceDiv").children().length==0){
86.                    for(var i=0;i
87.                       $(".faceDiv").append(" ImgIputHandler. FacePath[i].faceName "" src="face/" ImgIputHandler.facePath[i].facePath "" />");     
88.                     }     
89.                    $(".faceDiv>img").click(기능(){     
90.                             
91.                        isShowImg=false;     
92.                        $(이것).parent().animate({marginTop:"0px"},300 );     
93.                        ImgIputHandler.insertAtCursor($(".Input_text")[0],"[" $( 이것).attr("제목") "]");     
94.                     });     
95.                 }     
96.             }그밖에{     
97.                 isShowImg=false;     
98.                $(이것).parent().prev().animate({marginTop:"0px"},300);     
99.             }     
100.         });     
101.         $(".postBtn").click(기능(){     
102.             alert($(".Input_text").val());     
103.         });     
104.     },     
105.     insertAtCursor:함수(myField, myValue) {     
106.     if (document.selection) {     
107.         myField.focus();     
108.         sel = document.selection.createRange();     
109.         sel.text = myValue;     
110.         sel.select();     
111.     } else if (myField.selectionStart || myField.selectionStart == "0") {     
112.         var startPos = myField.selectionStart;     
113.         var endPos = myField.selectionEnd;     
114.         var restoreTop = myField.scrollTop;     
115.         myField.value = myField.value.substring(0, startPos)   myValue   myField.value.substring(endPos, myField.value.length);     
116.          (restoreTop > 0) {     
117.             myField.scrollTop = restoreTop;     
118.         }     
119.         myField.focus();     
120.         myField.selectionStart = startPos   myValue.length;     
121.         myField.selectionEnd = startPos   myValue.length;     
122.     } 그밖에 {     
123.         myField.value  = myValue;     
124.         myField.focus();     
125.     }     
126. }     
127. }