suchen

Heim  >  Artikel  >  Web-Frontend  >  Tutorial zum Erstellen eines Kommentarfelds mit Emoticons mithilfe von HTML und CSS_HTML/Xhtml_Webseitenproduktion

Tutorial zum Erstellen eines Kommentarfelds mit Emoticons mithilfe von HTML und CSS_HTML/Xhtml_Webseitenproduktion

WBOY
WBOYOriginal
2016-05-16 16:36:452255Durchsuche

HTML-Kommentarfeld mit Emoticons. Die Emoticons werden über Json-Daten geladen, und Sie können die Emoticons nach Ihren eigenen Vorlieben ändern. Der Code dieses Kommentarfelds ist HTML-, CSS- und JQ-Code. Abbildung 1 zeigt den Originalzustand und Abbildung 2 zeigt die Liste der Ausdrücke, die angezeigt wird, wenn Sie auf den Ausdruck klicken. Sie können nach Belieben einen oder mehrere auswählen. Werfen wir einen Blick auf den implementierten Code.

Bild 1

Bild 2

Implementierter Code:

　HTML-Code:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <div class="Main" > 
  2.  <div class="Input_Box" > 
  3.  <textarea class="Input_text" >textarea> 
  4.  <div class="faceDiv" > div>
    5.  
  5. <div class="Input_Foot" > <a Klasse="imgBtn" href="javascript:void(0);"> ;a><a Klasse="postBtn">OKa > div>  
    6. div>   div>  　
CSS3-Code:

CSS-Code

Inhalt in die Zwischenablage kopieren
  1. .Input_Box {     
  2.     Breite: 495px;     
  3.     Höhe: 160px;     
  4.     Rahmen: 1px durchgehend #ccc;     
  5.     Übergang: Grenze 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.     Rahmen-Radius: 5px;     
  11.     Hintergrundfarbe: #fff;     
  12.     Überlauf: versteckt;     
  13.     Position: absolut;     
  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.     Breite: 485px;     
  20.     Höhe: 111px;     
  21.     Auffüllung: 5px;     
  22.     Umriss: keine;     
  23.     Rahmen: 0px durchgehend #fff;     
  24.     Größe ändern: keine;     
  25.     Schriftart: 13px "微软雅黑" , Arial, Helvetica, Sans-Serif;     
  26.     -moz-border-radius: 5px;     
  27.     -webkit-border-radius: 5px;     
  28.     Rahmen-Radius: 5px;     
  29. }     
  30. .Input_Foot {     
  31.     Breite: 100 %;     
  32.     Höhe: 35px;     
  33.     Rand oben: 1px durchgehend #ccc;     
  34.     Hintergrundfarbe: #fff;     
  35.     -moz-border-radius: 0 0 5px 5px ;     
  36.     -webkit-border-radius: 0 0 5px 5px ;     
  37.     Rahmen-Radius: 0 0 5px 5px ;     
  38.     Position: absolut;     
  39. }     
  40. .imgBtn {     
  41.     schweben: links;     
  42.     Rand oben: 8px;     
  43.     Rand links: 10px;     
  44.     Hintergrundbild: URL(imgs.png);     
  45.     Hintergrundwiederholung: keine Wiederholung;     
  46.     Hintergrundposition: 0 -13px;     
  47.     Höhe: 18px;     
  48.     Breite: 20px;     
  49.     Cursor: Zeiger     
  50. }     
  51. .imgBtn:active {     
  52.     Rand oben: 9px;     
  53. }     
  54. .imgBtn:hover {     
  55.     Hintergrundposition: 0 -31px     
  56. }     
  57. .postBtn {     
  58.     float: rechtsrechts;     
  59.     Schriftart: 13px "微软雅黑" , Arial, Helvetica, Sans-Serif;     
  60.     Farbe: #808080;     
  61.     Auffüllung: 9px 20px 7px 20px;     
  62.     Rand links: 1px durchgehend #ccc;     
  63.     Cursor: Zeiger;     
  64.     -moz-border-radius: 0 0 5px 0;     
  65.     -webkit-border-radius: 0 0 5px 0;     
  66.     Rahmen-Radius: 0 0 5px 0;     
  67. }     
  68. .postBtn:hover {     
  69.     Farbe: #333;     
  70.     Hintergrundfarbe: #efefef;     
  71. }     
  72. .postBtn:active {     
  73.     Auffüllung: 10px 20px 6px 20px;     
  74. }     
  75. .faceDiv {     
  76.     Breite: 500px;     
  77.     Höhe: 120px;     
  78.     Rand oben: 1px durchgehend #ccc;     
  79.     Position: absolut;     
  80.     Hintergrundfarbe: #fff;     
  81.     -moz-border-radius: 5px 5px 0 0;     
  82.     -webkit-border-radius: 5px 5px 0 0;     
  83.     Rahmen-Radius: 5px 5px 0 0 ;     
  84. }     
  85. .faceDiv>img {     
  86.     Rahmen: 1px durchgehend #ccc;     
  87.     schweben: links;     
  88.     Rand links: -1px;     
  89.     Rand oben: -1px;     
  90.     Position: relativ;     
  91.     Breite: 24px;     
  92.     Höhe: 24px;     
  93.     Auffüllung: 3px 3px 3px 3px;     
  94.     Cursor: Zeiger;     
  95. }     
  96. .faceDiv>img:hover { 
  97.  Hintergrundfarbe: #efefef; 
  98. } 
  99. .faceDiv>img:active { 
  100. Auffüllung: 4px 3px 2px 3px;
    101. } 
　
Javascript-Code:

JavaScript-Code
Inhalt in die Zwischenablage kopieren
  1. var ImgIputHandler={ 
  2. facePath:[
  3. {faceName:"smile",facePath:"0_smile.gif"}, 
  4. {FACENAME: "🎜> , Facepath: " 1_ 撇 撇 .gif " > {faceName:
    5. "色"
  5. ,facePath:"2_色.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. "Shut up", facePath:"7_Shut up.gif"},
    10. {faceName:
  10. "crying", facePath:"9_crying.gif"},
    11. {faceName:
  11. "Awkward",facePath:"10_awkward.gif"}, 
    12. {faceName:
  12. "angry",facePath:"11_angry.gif"},  {FACENAME:
  13. „Naughty“ , FacePath: „12_ 皮 .gif“ }, {faceName:
  14. "Barteeth",facePath:"13_Bargain.gif"}, {faceName:
  15. "surprise",facePath:"14_surprise.gif"},  {faceName:
  16. "sad",facePath:"15_sad.gif"},  {faceName:
  17. "Cool",facePath:"16_cool.gif"},  {faceName:
  18. "Cold Sweat",facePath:"17_Cold Sweat.gif"}, > {faceName:
    19. "Crazy"
  19. ,facePath:"18_Crazy.gif"}, 
  20. {faceName:"vomit",facePath:"19_vomit.gif"}, 
  21. {FACENAME: „Smiling“ , FacePath: „20_linking .gif“ },
  22. {faceName:"cute",facePath:"21_cute.gif"}, 
  23. {faceName:"White Eyes",facePath:"22_White Eyes.gif"}, 
  24. {faceName:"arrogance",facePath:"23_arrogance.gif"}, 
  25. {faceName:"hunger",facePath:"24_hunger.gif"}, 
  26. {faceName:"trapped",facePath:"25_trapped.gif"}, 
  27. {faceName:"Horror",facePath:"26_Horror.gif"}, 
  28. {faceName:"sweat", facePath:"27_sweat.gif"},
    29. {FACENAME:
  29. "憨" , facepath: "28_ 憨 笑 .gif" },
    30. {faceName:
  30. "GI",facePath:"29_GI.gif"}, 
    31. {faceName:
  31. "struggle",facePath:"30_struggle.gif"}, 
    32. {faceName:
  32. "cuss",facePath:"31_curse.gif"}, 
    33. {faceName:
  33. "question",facePath:"32_question.gif"}, 
    34. {faceName:
  34. "Sh",facePath:"33_boo.gif"}, 
    35. {faceName:
  35. "halo",facePath:"34_halo.gif"}, 
    36. {faceName:
  36. "folter",facePath:"35_torture.gif"}, 
    37.                                                                                                                                                                                                                               ​>
  37. {faceName:"Skeleton",facePath:"37_skeleton.gif"}, 
  38. {FACENAME: „Tap“ , Facepath: „38_ hit .gif“ },
  39. {faceName:"Goodbye",facePath:"39_Goodbye.gif"}, 
  40. {faceName:"wipe Sweat", facePath:"40_wipe Sweat.gif"},
  41.                                             {faceName:
  42. "picking your Nose", facePath:"41_picking your Nose.gif"}, {faceName:
  43. "Applause",facePath:"42_Applause.gif"},  {faceName:
  44. "Es ist mir so peinlich", facePath:"43_Es ist mir peinlich.gif" },  {faceName:
  45. "bad smile", facePath:"44_bad smile.gif"}, {faceName:
  46. "Zuo Hengheng", facePath:"45_left Hengheng.gif" },                                                                                                     {faceName:
  47. "Right Heng Heng", facePath:"46_Right Heng Heng.gif" }, {faceName:
  48. "Yawn",facePath:"47_yawn.gif"},  {faceName:
  49. "Contempt",facePath:"48_Contempt.gif"},  {faceName:
  50. "Grief",facePath:"49_Grief.gif"},  {faceName:
  51. "Ich werde gleich weinen", facePath:"50_Ich werde gleich weinen.gif" },  {faceName:
  52. "insidious",facePath:"51_insidious.gif"},  {faceName:
  53. "Kiss", facePath:"52_Kiss.gif"}, {FACENAME:
    54. „Scared“
  54. , Facepath: „53_ <.gif> }, {faceName:
    55. "Poor"
  55. ,facePath:"54_Poor.gif"},  {faceName:
    56. "Chop Knife"
  56. ,facePath:"55_Chop Knife.gif"},  {faceName:
    57. "Watermelon"
  57. ,facePath:"56_watermelon.gif"}, 
  58. {faceName:"Beer",facePath:"57_beer.gif"}, 
  59. {faceName:"Basketball",facePath:"58_basketball.gif"}, 
  60. {faceName:"pingpong",facePath:"59_pingpong.gif"}, 
  61. {faceName:"Hug",facePath:"78_hug.gif"}, 
  62. {faceName:"Handshake",facePath:"81_Handshake.gif"}, 
  63. {faceName:"smiling smugly", facePath:"smiling smugly.gif"},
  64. {faceName:"Musik hören",facePath:"Musik hören.gif"} 
  65. ]
  66. , ,
  67. Init:Funktion(){
  68.  var isShowImg=false; 
  69. $(".Input_text").focusout(function(){
  70. $(this).parent().css("border-color", "#cccccc");
    71. $(
  71. this).parent().css("box-shadow", "keine"); 
    72. $(
  72. this).parent().css("-moz-box-shadow", "keine"); $(
    73. this
  73. ).parent().css("-webkit-box-shadow", "keine"); });     
  74.         $(".Input_text").focus(function(){     
  75.         $(this).parent().css("border-color",  "rgba(19,105,172,.75)");     
  76.         $(this).parent().css("box-shadow",  "0 0 3px rgba(19,105,192,.5)");     
  77.         $(this).parent().css("-moz-box-shadow", "0 0 3px rgba(241,39,232,.5)");     
  78.         $(this).parent().css("-webkit-box-shadow", "0 0 3px rgba(19,105,252,3)");     
  79.         });     
  80.         $(".imgBtn").click(function(){     
  81.             if(isShowImg==false){     
  82.                 isShowImg=true;     
  83.                 $(this).parent().prev().animate({marginTop:"-125px"},300);     
  84.                                      >                         $(".faceDiv"
  85. ).append(" ImgIputHandler. facePath[i].faceName "" src="face/" ImgIputHandler.facePath[i].facePath "" />"
  86. );                          }     
  87.                     $(".faceDiv>img").click(function(){     
  88.                               
  89.                         isShowImg=false;     
  90.                         $(this).parent().animate({marginTop:"0px"},300 );     
  91.                         ImgIputHandler.insertAtCursor($(".Input_text")[0],"[" $( dieses).attr("title") "]");     
  92.                     });     
  93.                 }     
  94.             }sonst{     
  95.                 isShowImg=false;     
  96.                 $(this).parent().prev().animate({marginTop:"0px"},300);     
  97.             }     
  98.         });     
  99.         $(.postBtn").click(function(){     
  100.             alert($(".Input_text").val());     
  101.         });     
  102.     },     
  103.     insertAtCursor:function(myField, myValue) {     
  104.     if (document.selection) {     
  105.         myField.focus();     
  106.         sel = document.selection.createRange();     
  107.         sel.text = myValue;     
  108.         sel.select();     
  109.     } else if (myField.selectionStart || myField.selectionStart == "0") {     
  110.         var startPos = myField.selectionStart;     
  111.         var endPos = myField.selectionEnd;     
  112.         var restoreTop = myField.scrollTop;     
  113.         myField.value = myField.value.substring(0, startPos)   myValue   myField.value.substring(endPos, myField.value.length);     
  114.         if (restoreTop > 0) {     
  115.             myField.scrollTop = restoreTop;     
  116.         }     
  117.         myField.focus();     
  118.         myField.selectionStart = startPos   myValue.length;     
  119.         myField.selectionEnd = startPos   myValue.length;     
  120.     } else {     
  121.         myField.value  = myValue;     
  122.         myField.focus();     
  123.     }     
  124. }     
  125. }    
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Verwenden Sie Vertical-Align, um die Eingabe und die Produktion von img_HTML/Xhtml_Webseiten auszurichtenNächster Artikel：Verwenden Sie Vertical-Align, um die Eingabe und die Produktion von img_HTML/Xhtml_Webseiten auszurichten

In Verbindung stehende Artikel

Mehr sehen