masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > html tutorial > Tutorial tentang cara membuat kotak ulasan dengan emotikon menggunakan HTML dan CSS_HTML/Xhtml_Web page production

Tutorial tentang cara membuat kotak ulasan dengan emotikon menggunakan HTML dan CSS_HTML/Xhtml_Web page production

WBOY
Lepaskan： 2016-05-16 16:36:45
asal
2280 orang telah melayarinya

Kotak komen HTML dengan emotikon dimuatkan melalui data Json, dan anda boleh menukar emotikon mengikut pilihan anda sendiri. Kod kotak ulasan ini ialah kod HTML, CSS dan JQ. Rajah 1 menunjukkan keadaan asal, dan Rajah 2 menunjukkan senarai ungkapan yang muncul apabila anda mengklik pada ungkapan Anda boleh memilih satu atau lebih sesuka hati. Mari kita lihat kod yang dilaksanakan.

Gambar 1

Gambar 2

Kod yang dilaksanakan:

　kod html:

Kod XML/HTMLSalin kandungan ke papan keratan
  1. <div kelas="Utama" > 
  2.  <div kelas="Kotak_Input" > 
  3.  <kawasan teks kelas="Input_text" >kawasan teks> 
  4.  <div kelas="faceDiv" > div>
    5.  
  5. <div kelas="Input_Foot" > <sebuah kelas="imgBtn" href="javascript:void(0);"> ;a><a kelas="postBtn">OKa > div>  
    6. div>   div>  　
kod css3:

Kod CSS

Salin kandungan ke papan keratan
  1. .Input_Box {     
  2.     lebar: 495px;     
  3.     tinggi: 160px;     
  4.     sempadan: 1px pepejal #ccc;     
    5.     peralihan: 
  5. sempadan linear .2s, kotak-bayang linear .5s;     
    6.     -moz-transition: 
  6. sempadan linear .2s, -moz-box-shadow linear .5s;     
    7.     -webkit-transition: 
  7. sempadan linear .2s, -webkit-box-shadow linear .5s;     
    8.     -moz-
  8. sempadan-jejari: 5px;     
    9.     -webkit-
  9. sempadan-jejari: 5px;     
    10.     
  10. sempadan-jejari: 5px;     
    11.     
  11. warna latar belakang: #fff;     
    12.     
  12. limpahan: tersembunyi;     
    13.     
  13. kedudukan: mutlak;     
    14.     -moz-box-shadow: 0 0 
  14. 5px #ccc;     
    15.     -webkit-box-shadow: 0 0 
  15. 5px #ccc;     
    16.     bayang-kotak: 0 0 
  16. 5px #ccc;     
    17. }     
  17. .Input_Box>textarea {     
  18.     lebar: 485px;     
  19.     tinggi: 111px;     
  20.     lapik: 5px;     
  21.     garis besar: tiada;     
  22.     sempadan: 0px pepejal #fff;     
    23.     ubah saiz: 
  23. tiada;     
    24.     
  24. font: 13px "微软雅黑">Arial, Helvetica, sans-serif;          -moz-
  25. sempadan-jejari: 5px;          -webkit-
  26. sempadan-jejari: 5px;          
  27. sempadan-jejari: 5px;      }     
  28. .Input_Foot {     
  29.     
  30. lebar: 100%;          
  31. tinggi: 35px;          
  32. bahagian atas sempadan: 1px pepejal #ccc;          
  33. warna latar belakang: #fff;          -moz-
  34. sempadan-jejari: 0 0 5px 5px ;          -webkit-
  35. sempadan-jejari: 0 0 5px 5px ;          
  36. sempadan-jejari: 0 0 5px 5px ;          
  37. kedudukan: mutlak;      }     
  38. .imgBtn {     
  39.     terapung: kiri;     
  40.     margin-atas: 8px;     
  41.     margin-kiri: 10px;     
  42.     imej latar belakang: url(imgs.png);     
  43.     latar belakang-ulang: tiada ulangan;     
  44.     kedudukan latar belakang: 0 -13px;     
  45.     tinggi: 18px;     
  46.     lebar: 20px;     
  47.     kursor: penunjuk     
  48. }     
  49. .imgBtn:aktif {     
  50.     margin-atas: 9px;     
  51. }     
  52. .imgBtn:tuding {     
  53.     kedudukan latar belakang: 0 -31px     
  54. }     
  55. .postBtn {     
  56.     terapung: kanankanan;     
  57.     font: 13px "微软雅黑">Arial, Helvetica, sans-serif;     
  58.     warna: #808080;     
  59.     pelapis: 9px 20px 7px 20px;          
  60. kiri sempadan: 1px pepejal #ccc;          
  61. kursor: penunjuk;          -moz-
  62. sempadan-jejari: 0 0 5px 0;          -webkit-
  63. sempadan-jejari: 0 0 5px 0;          
  64. sempadan-jejari: 0 0 5px 0;      }     
  65. .postBtn:tuding {     
  66.     warna: #333;     
  67.     warna latar belakang: #efefef;     
  68. }     
  69. .postBtn:aktif {     
  70.     padding: 10px 20px 6px 20px;     
    71. }     
    72. .faceDiv {     
    73.     
  73. lebar: 500px;     
    74.     
  74. tinggi: 120px;     
    75.     
  75. bahagian atas sempadan: 1px pepejal #ccc;     
    76.     
  76. kedudukan: mutlak;     
    77.     
  77. warna latar belakang: #fff;     
    78.     -moz-
  78. sempadan-jejari: 5px 5px 0 0;     
    79.     -webkit-
  79. sempadan-jejari: 5px 5px 0 0;     
    80.     
  80. sempadan-jejari: 5px 5px 0 0 ;     
    81. }     
    82. .faceDiv>img {     
    83.     
  83. sempadan: 1px pepejal #ccc;          
    84. terapung
  84. : kiri;          
    85. margin-kiri
  85. : -1px;          
    86. margin-atas
  86. : -1px;          
    87. kedudukan
  87. : saudara;          
    88. lebar
  88. : 24px;          
    89. tinggi
  89. : 24px;          
    90. padding
  90. : 3px 3px 3px 3px;          kursor
    91. : 
  91. penunjuk;      }     
  92. .faceDiv>img:tuding { 
  93.  warna latar belakang: #efefef; 
  94. } 
  95. .faceDiv>img:aktif { 
  96. padding: 4px 3px 2px 3px;
    97. } 
　
Kod JavaScript:

Kod JavaScript
Salin kandungan ke papan keratan
  1. var ImgIputHandler={ 
  2. facePath:[
  3. {faceName:"senyum",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. "malu",facePath:"6_shy.gif"}, 
    9. {faceName:
  9. "Diam", facePath:"7_Shut up.gif"},
    10. {faceName:
  10. "menangis", facePath:"9_crying.gif"}, {faceName:
  11. "Awkward",facePath:"10_awkward.gif"},  {faceName:
  12. "marah",facePath:"11_angry.gif"},  {FACENAME:
    13. "Nakal"
  13. , FacePath: "12_ 皮 .gif" }, {faceName:
    14. "Barteeth"
  14. ,facePath:"13_Bargain.gif"}, {faceName:
    15. "kejutan"
  15. ,facePath:"14_surprise.gif"},  {faceName:
    16. "sedih"
  16. ,facePath:"15_sad.gif"},  {faceName:
    17. "Cool"
  17. ,facePath:"16_cool.gif"},  {faceName:
    18. "Peluh Sejuk"
  18. ,facePath:"17_Cold Sweat.gif"}, > {faceName:"Gila"
  19. ,facePath:"18_Crazy.gif"}, 
  20. {faceName:"muntah",facePath:"19_vomit.gif"}, 
  21. {FACENAME: "Tersenyum" , FacePath: "20_linking .gif" },
  22. {faceName:"comel",facePath:"21_cute.gif"}, 
  23. {faceName:"White Eyes",facePath:"22_White Eyes.gif"}, 
  24. {faceName:"sombong",facePath:"23_arrogance.gif"}, 
  25. {faceName:"lapar",facePath:"24_hunger.gif"}, 
  26. {faceName:"terperangkap",facePath:"25_trapped.gif"}, 
  27. {faceName:"Seram",facePath:"26_Horror.gif"}, 
  28. {faceName:"peluh", facePath:"27_sweat.gif"}, {FACENAME:
  29. "憨" , facepath: "28_ 憨 笑 .gif" }, {faceName:
  30. "GI",facePath:"29_GI.gif"},  {faceName:
  31. "perjuangan",facePath:"30_struggle.gif"},  {faceName:
  32. "cuss",facePath:"31_curse.gif"},  {faceName:
  33. "soalan",facePath:"32_question.gif"},  {faceName:
  34. "Sh",facePath:"33_boo.gif"},  {faceName:
  35. "halo",facePath:"34_halo.gif"},  {faceName:
  36. "penyiksaan",facePath:"35_torture.gif"},                                                                                                                                                                                                                                                                                                                                                                                                                           >
  37. {faceName:"Skeleton",facePath:"37_skeleton.gif"}, 
  38. {FACENAME: "Ketik" , Facepath: "38_ tekan .gif" },
  39. {faceName:"Selamat tinggal",facePath:"39_Goodbye.gif"}, 
  40. {faceName:"lap peluh", facePath:"40_wipe sweat.gif"},
  41.                                             {faceName:
  42. "mencungkil hidung", facePath:"41_mencungkil hidung.gif"}, {faceName:
  43. "Applause",facePath:"42_Applause.gif"},  {faceName:
  44. "Saya sangat malu", facePath:"43_Saya malu.gif" },  {faceName:
  45. "senyuman teruk", 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. "Penghinaan",facePath:"48_Contempt.gif"},  {faceName:
  50. "Kesedihan",facePath:"49_Grief.gif"},  {faceName:
  51. "Saya hampir menangis", facePath:"50_Saya hampir menangis.gif" },  {faceName:
  52. "insidious",facePath:"51_insidious.gif"},  {faceName:
  53. "Kiss", facePath:"52_Kiss.gif"}, {FACENAME:
    54. "Takut"
  54. , Facepath: "53_ <.gif> }, {faceName:
    55. "Miskin"
  55. ,facePath:"54_Poor.gif"},  {faceName:
    56. "Chop Knife"
  56. ,facePath:"55_Chop Knife.gif"},  {faceName:
    57. "Tembikai"
  57. ,facePath:"56_watermelon.gif"}, 
  58. {faceName:"Beer",facePath:"57_beer.gif"}, 
  59. {faceName:"Bola Keranjang",facePath:"58_basketball.gif"}, 
  60. {faceName:"pingpong",facePath:"59_pingpong.gif"}, 
  61. {faceName:"Peluk",facePath:"78_hug.gif"}, 
  62. {faceName:"Berjabat Tangan",facePath:"81_Handshake.gif"}, 
  63. {faceName:"senyum sombong", facePath:"senyum sombong.gif"},
  64. {faceName:"Dengar muzik",facePath:"Dengar muzik.gif"} 
  65. ]
  66. , ,
  67. Init:fungsi(){
  68.  var isShowImg=false; 
  69. $(".Input_text").fokusout(fungsi(){
  70. $(ini).ibu bapa().css("warna sempadan", "#cccccc");
    71. $(
  71. ini).ibu bapa().css("bayang-kotak", "tiada"); 
    72. $(
  72. ini).parent().css("-moz-box-shadow", "tiada"); $(
    73. ini
  73. ).parent().css("-webkit-box-shadow", "tiada"); });     
  74.         $(".Input_text").fokus(fungsi(){     
  75.         $(ini).ibu bapa().css("warna sempadan",  "rgba(19,105,172,.75)");     
  76.         $(ini).ibu bapa().css("bayang-kotak",  "0 0 3px rgba(19,105,192,.5)");     
  77.         $(ini).parent().css("-moz-box-shadow", "0 0 3px rgba(241,39,232,.5)");     
  78.         $(ini).parent().css("-webkit-box-shadow", "0 0 3px rgba(19,105,252,3)");     
  79.         });     
  80.         $(".imgBtn").klik(fungsi(){     
  81.             jika(isShowImg==salah){     
  82.                 isShowImg=benar;     
  83.                 $(ini).parent().prev().animate({marginTop:"-125px"},300);     
  84.                 jika($(".faceDiv").kanak-kanak().length==0){
  85.                     untuk(var i=0;i
    86. (
  86. var i=0;i                          $(".faceDiv").append("an>"" src="face/" ImgIputHandler.facePath[i].facePath 
    87. "" />"
  87. );                          }     
  88.                     $(".faceDiv>img").klik(fungsi    
    89.   
  89.                                  
  90.                         isShowImg=salah;     
  91.                          $(ini).ibu bapa().animate({marginTop:"0px""0px"
  92.                         ImgIputHandler.insertAtCursor($(".Input_text")[0],">"> ini).attr("tajuk") "]");     
  93.                     });     
  94.                 }     
  95.             }lain{     
  96.                 isShowImg=palsu;     
  97.                 $(ini).parent().prev().animate({marginTop:"0px"},300);     
  98.             }     
  99.         });     
  100.         $(".postBtn").klik(fungsi(){     
  101.             makluman($(".Input_text").val());     
  102.         });     
  103.     },     
  104.     insertAtCursor:fungsi(myField, myValue) {     
  105.     jika (dokumen.pemilihan) {     
  106.         myField.focus();     
  107.         sel = document.selection.createRange();     
  108.         sel.text = myValue;     
  109.         sel.select();     
  110.     } lain jika (myField.selectionStart || myField.selectionStart == "0") {     
    111.         
  111. var startPos = myField.selectionStart;     
    112.         
  112. var endPos = myField.selectionEnd;     
    113.         
  113. var restoreTop = myField.scrollTop;     
    114.         myField.value = myField.value.substring(0, startPos)   myValue   myField.value.substring(endPos, myField.value.length);     
    115.         
  115. jika (restoreTop > 0) {     
    116.             myField.scrollTop = restoreTop;     
    117.         }     
    118.         myField.focus();     
    119.         myField.selectionStart = startPos   myValue.length;     
    120.         myField.selectionEnd = startPos   myValue.length;     
    121.     } 
  121. lain {     
    122.         myField.value  = myValue;     
    123.         myField.focus();     
    124.     }     
    125. }     
    126. }    
Label berkaitan：
html输入表情 html获取文本框的值 表情输入框
sumber：php.cn
Artikel sebelumnya：Gunakan penjajaran menegak untuk menjajarkan input dan pengeluaran halaman img_HTML/Xhtml_Web Artikel seterusnya：HTML menggunakan atribut tajuk untuk memaparkan teks pada hover_HTML/Xhtml_Pengeluaran halaman web tetikus
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Merekod pertanyaan di bawah syarat nilai separa - perkongsian kemahiran SQL Saya mempunyai jadual yang dipanggil zipcode yang mempunyai lajur yang dipanggil kod. Laju...
daripada 2024-04-06 16:01:26
0
1
395
Konsol tidak memaparkan input teks yang saya sediakan Jadi saya menggunakan formik untuk membina borang dalam React. Saya membuat komponen TextI...
daripada 2024-04-04 20:30:28
0
1
404
Pastikan bekas sel jadual memenuhi keseluruhan ketinggian induk Saya cuba menjajarkan kandungan secara menegak tanpa menggunakan Flexbox, kerana terdapat ...
daripada 2024-04-04 16:03:18
0
1
404
Tambahkan nilai tambahan pada medan data format yang dipaparkan menggunakan javascript Saya cuba mencapai ini: Saya ingin mencipta borang yang mengumpul data yang dimasukkan ole...
daripada 2024-04-04 15:17:13
0
1
3589
Dapatkan semula sejarah kaedah pembayaran untuk pelanggan WooCommerce Saya menjumpai skrip yang membantu saya mendapatkan maklumat yang saya perlukan: kaedah pe...
daripada 2024-04-04 14:57:11
0
1
428
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan