지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > HTML 튜토리얼 > 본문

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

WBOY
풀어 주다： 2016-05-16 16:36:45
원래의
2260명이 탐색했습니다.

이모티콘이 포함된 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.  
  5. <div class="Input_Foot" > <아 수업="imgBtn" href="javascript:void(0);"> ;아><아 class="postBtn">OKa > div>  
    6. 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픽셀;
    101. } 
　
자바스크립트 코드:

JavaScript 코드
클립보드에 콘텐츠 복사
  1. var ImgIputHandler={ 
  2. 얼굴 경로:[
  3. {faceName:"미소",facePath:"0_smile.gif"}, 
  4. {FACENAME: "🎜> , Facepath: " 1_ 撇 撇 .gif " > {faceName:
    5. "color"
  5. ,facePath:"2_color.gif"},  {FACENAME: "Duke"
  6. , Facepath: "3_ Duke .gif" }, {faceName:"Deyi"
  7. ,facePath:"4_Deyi.gif"},                                                                                                                        >
    8. {faceName:
  8. "shy",facePath:"6_shy.gif"}, 
    9. {faceName:
  9. "닥쳐", FacePath:"7_Shut up.gif"},
    10. {faceName:
  10. "울음", FacePath:"9_crying.gif"},
    11. {faceName:
  11. "어색함",facePath:"10_awkward.gif"}, 
    12. {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. "미쳤어"
  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"},
    29. {FACENAME:
  29. "憨" , Facepath: "28_ 憨 笑 .gif" },
    30. {faceName:
  30. "GI",facePath:"29_GI.gif"}, 
    31. {faceName:
  31. "투쟁",facePath:"30_struggle.gif"}, 
    32. {faceName:
  32. "저주",facePath:"31_curse.gif"}, 
    33. {faceName:
  33. "질문",facePath:"32_question.gif"}, 
    34. {faceName:
  34. "Sh",facePath:"33_boo.gif"}, 
    35. {faceName:
  35. "halo",facePath:"34_halo.gif"}, 
    36. {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:
    48. "Right Hum"
  48. , FacePath: "46_ right hum .gif" },  {faceName:
    49. "하품"
  49. ,facePath:"47_yawn.gif"},  {faceName:
    50. "경멸"
  50. ,facePath:"48_Contempt.gif"},  {faceName:
    51. "불만"
  51. ,facePath:"49_grievance.gif"},  {faceName:
    52. "울 것 같아"
  52. , FacePath:"50_울 것 같아.gif" },  {faceName:
    53. "inidious"
  53. ,facePath:"51_insidious.gif"},  {faceName:
    54. "키스"
  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. $(
  72. 이것).parent().css("box-shadow", "없음")
    73. $(
  73. 이것).parent().css("-moz-box-shadow", "없음"); $(
    74. 이
  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. }    
관련 라벨：
html输入表情 html获取文本框的值 表情输入框
원천：php.cn
이전 기사：수직 정렬을 사용하여 입력 및 img_HTML/Xhtml_Web 페이지 생성 정렬 다음 기사：HTML은 title 속성을 사용하여 마우스 hover_HTML/Xhtml_Web 페이지 제작 시 텍스트를 표시합니다.
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
부분 값 조건에서 쿼리 기록 - SQL 기술 공유 code라는 열이 있는 zipcode라는 테이블이 있습니다. Code 열에는 우편번호 접두사가 포함됩니다(예: 395453302120312). 제공된 우편번호가 ...
에서 2024-04-06 16:01:26
0
1
395
내가 제공한 텍스트 입력이 콘솔에 표시되지 않습니다. 그래서 저는 formik을 사용하여 React에서 양식을 작성하고 있습니다. 몇 가지 변경 사항이 적용된 입력 필드가 포함된 TextInput 구성 요소를 만들었...
에서 2024-04-04 20:30:28
0
1
404
테이블 셀의 컨테이너가 상위 셀의 전체 높이를 채우는지 확인하세요. Flexbox를 사용하지 않고 콘텐츠를 세로로 정렬하려고 하는데, 우리 사용 사례에 문제가 있어서 세로로 정렬된 테이블로 하려고 하는데 문제는 그 안의 콘텐츠가 ...
에서 2024-04-04 16:03:18
0
1
404
자바스크립트를 사용하여 표시된 형식 데이터 필드에 추가 값 추가 저는 이것을 달성하려고 합니다. 사용자가 입력한 데이터를 수집하여 화면에 인쇄하는 양식을 만들고 싶습니다. 지금까지 아래 코드 조각을 사용하여 거의 작업 효과를 ...
에서 2024-04-04 15:17:13
0
1
3589
WooCommerce 고객의 결제 수단 내역을 검색합니다. 필요한 정보, 즉 과거에 고객이 주문에 사용한 결제 방법을 얻는 데 도움이 되는 스크립트를 찾았습니다. $order=newWC_Order($order_id);$p...
에서 2024-04-04 14:57:11
0
1
428
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿