HTML と CSS を使用して絵文字付きのコメント ボックスを作成する方法のチュートリアル

HTML と CSS を使用して絵文字付きのコメント ボックスを作成する方法のチュートリアル

絵文字付きの HTML コメント ボックス。絵文字は Json データを通じて読み込まれ、好みに応じて絵文字を変更できます。このコメントボックスのコードは HTML、CSS、JQ で構成されています。図 1 は元の状態、図 2 は絵文字をクリックしたときに表示される絵文字の一覧です。絵文字は 1 つでも複数でも自由に選択できます。実装コードを見てみましょう。

図1

図2

実装コード:

HTMLコード:

XML/HTML コードコンテンツをクリップボードにコピー
  1. < div  クラス= "メイン" >      
  2.           < div  クラス= "Input_Box" >      
  3.             <テキストエリア クラス= "Input_text" > </テキストエリア>      
  4.             < div  クラス= "faceDiv" >   </div>​​      
  5.             < div  クラス= "Input_Foot" >   <  クラス= "imgBtn"   href = "javascript:void(0);" > </ a > < a  クラス= " postBtn " > OK </a>   </div>​​      
  6.           </div>​​      
  7.         </div>​​     

CSS3 コード:

CSSコードコンテンツをクリップボードにコピー
  1. .入力ボックス{
  2.     幅: 495px ;
  3.     高さ: 160px ;
  4.     境界線: 1ピクセル 固体  #ccc ;
  5. 遷移: 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-境界線-半径: 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   「Microsoft YaHei」 、 Arial 、 Helvetica 、サンセリフ;
  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 5px   5ピクセル;
  36. -webkit-境界線-半径: 0 0 5px   5ピクセル;
  37.     境界線の半径: 0 0 5px   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:ホバー{
  55.     背景位置: 0 - 31px      
  56. }
  57. .postBtn{
  58.      float :右右;
  59.     フォント: 13px   「Microsoft YaHei」 、 Arial 、 Helvetica 、サンセリフ;
  60.     色: #808080 ;
  61.     パディング: 9px   20ピクセル  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:ホバー{
  69.     色: #333 ;
  70.     背景色: #efefef ;
  71. }
  72. .postBtn:アクティブ{
  73.     パディング: 10px   20ピクセル  6ピクセル  20ピクセル;
  74. }
  75. .faceDiv{
  76.     幅: 500px ;
  77.     高さ: 120px ;
  78.     上ボーダー: 1px  固体  #ccc ;
  79.     位置:絶対;
  80.     背景色: #fff ;
  81. -moz-境界線-半径: 5px   5ピクセル0 0;
  82. -webkit-境界線-半径: 5px   5ピクセル0 0;
  83.     境界線-半径: 5px   5ピクセル0 0;
  84. }
  85. .faceDiv>画像{
  86.     境界線: 1ピクセル 固体  #ccc ;
  87.     フロート:左;
  88.     左マージン: - 1px ;
  89.     上マージン: - 1px ;
  90.     位置:相対的;
  91.     幅: 24px ;
  92.     高さ: 24px ;
  93.     パディング: 3px   3ピクセル  3ピクセル  3ピクセル;
  94.     カーソル:ポインタ;
  95. }
  96. .faceDiv>img:hover {
  97.     背景色: #efefef ;
  98. }
  99. .faceDiv>img:アクティブ{
  100.     パディング: 4px   3ピクセル  2ピクセル  3ピクセル;
  101. }

Javascript コード:

JavaScriptコードコンテンツをクリップボードにコピー
  1. var ImgIputHandler = {
  2. フェイスパス:[
  3. {faceName: "スマイル" 、facePath: "0_Smile.gif" },
  4. {faceName: "撇嘴" ,facePath: "1_撇嘴.gif" },
  5. {faceName: "color" 、facePath: "2_color.gif" },
  6. {faceName: "大呆" ,facePath: "3_大呆.gif" },
  7. {faceName: "Deyi" 、facePath: "4_Deyi.gif" },
  8. {faceName: "涙" 、facePath: "5_tears.gif" },
  9. {faceName: "shy" ,facePath: "6_shy.gif" },
  10. {faceName: "黙れ" ,facePath: "7_黙れ.gif" },
  11. {faceName: "Big Cry" ,facePath: "9_Big Cry.gif" },
  12. {faceName: "ぎこちない" ,facePath: "10_awkward.gif" },
  13. {faceName: "怒っている" 、facePath: "11_Angry.gif" },
  14. {faceName: "いたずら" 、facePath: "12_naughty.gif" },
  15. {faceName: "龇牙" ,facePath: "13_龇牙.gif" },
  16. {faceName: "驚いた" 、facePath: "14_Surprised.gif" },
  17. {faceName: "悲しい" 、facePath: "15_sad.gif" },
  18. {faceName: "クール" 、facePath: "16_Cool.gif" },
  19. {faceName: "冷や汗" ,facePath: "17_冷や汗.gif" },
  20. {faceName: "クレイジー" ,facePath: "18_Crazy.gif" },
  21. {faceName: "吐" ,facePath: "19_吐.gif" },
  22. {faceName: "偷笑" ,facePath: "20_偷笑.gif" },
  23. {faceName: "かわいい" 、facePath: "21_cute.gif" },
  24. {faceName: "白い目" ,facePath: "22_白い目.gif" },
  25. {faceName: "傲慢" ,facePath: "23_Arrogant.gif" },
  26. {faceName: "空腹" ,facePath: "24_Hungry.gif" },
  27. {faceName: "困" ,facePath: "25_困.gif" },
  28. {faceName: "ホラー" 、facePath: "26_horror.gif" },
  29. {faceName: "発汗" ,facePath: "27_Sweating.gif" },
  30. {faceName: "傻笑" ,facePath: "28_傻笑.gif" },
  31. {faceName: "大兵" ,facePath: "29_大兵.gif" },
  32. {faceName: "Struggle" ,facePath: "30_Struggle.gif" },
  33. {faceName: "誓う" ,facePath: "31_Swear.gif" },
  34. {faceName: "doubt" ,facePath: "32_doubt.gif" },
  35. {faceName: "呼" ,facePath: "33_呼.gif" },
  36. {faceName: "晕" ,facePath: "34_晕.gif" },
  37. {faceName: "拷問" 、facePath: "35_torture.gif" },
  38. {faceName: "衰" ,facePath: "36_衰.gif" },
  39. {faceName: "頭蓋骨" ,facePath: "37_Skull.gif" },
  40. {faceName: "ノック" ,facePath: "38_knock.gif" },
  41. {faceName: "さようなら" ,facePath: "39_Goodbye.gif" },
  42. {faceName: "汗を拭く" ,facePath: "40_汗を拭く.gif" },
  43.              
  44. {faceName: "鼻をほじる" ,facePath: "41_鼻をほじる.gif" },
  45. {faceName: "拍手" 、facePath: "42_applause.gif" },
  46. {faceName: "峗大了" ,facePath: "43_峗大了.gif" },
  47. {faceName: "bad smile" ,facePath: "44_bad smile.gif" },
  48. {faceName: "左哄哄" ,facePath: "45_左哄哄.gif" },
  49. {faceName: "右哄哄" ,facePath: "46_右哄哄.gif" },
  50. {faceName: "あくび" ,facePath: "47_yawn.gif" },
  51. {faceName: "despise" ,facePath: "48_despise.gif" },
  52. {faceName: "不満" ,facePath: "49_grievance.gif" },
  53. {faceName: "泣きそう" ,facePath: "50_泣きそう.gif" },
  54. {faceName: "インシディアス" ,facePath: "51_Insidious.gif" },
  55. {faceName: "亲亲" ,facePath: "52_亲亲.gif" },
  56. {faceName: "吓" ,facePath: "53_吓.gif" },
  57. {faceName: "Poor" ,facePath: "54_Poor.gif" },
  58. {faceName: "菜刀" ,facePath: "55_菜刀.gif" },
  59. {faceName: "スイカ" ,facePath: "56_スイカ.gif" },
  60. {faceName: "ビール" 、facePath: "57_beer.gif" },
  61. {faceName: "バスケットボール" 、facePath: "58_Basketball.gif" },
  62. {faceName: "ピンポン" ,facePath: "59_ピンポン.gif" },
  63. {faceName: "ハグ" ,facePath: "78_Hug.gif" },
  64. {faceName: "握手" 、facePath: "81_handshake.gif" },
  65. {faceName: "誇らしげに笑う" ,facePath: "誇らしげに笑う.gif" },
  66. {faceName: "音楽を聴く" 、facePath: "音楽を聴く.gif" }
  67. ]
  68. 、
  69. 初期化:関数(){
  70.          var isShowImg = false ;
  71. $( ".Input_text" ).focusout(関数(){
  72. $( this ).parent().css( "border-color" , "#cccccc" );
  73. $( this ).parent().css( "box-shadow" , "none" );
  74. $( this ).parent().css( "-moz-box-shadow" , "なし" );
  75. $( this ).parent().css( "-webkit-box-shadow" , "なし" );
  76. });
  77. $( ".Input_text" ).focus(関数(){
  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(関数(){
  84.              if (isShowImg == false ) {
  85. isShowImg = true ;
  86. $( this ).parent().prev().animate({marginTop: "-125px" },300);
  87.                  ($( ".faceDiv" ).children().length==0)の場合{
  88.                      ( 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(関数(){
  92.                               
  93. isShowImg = false ;
  94. $( this ).parent().animate({marginTop: "0px" },300);
  95. ImgIputHandler.insertAtCursor($( ".Input_text" )[0], "[" $( this ).attr( "title" ) "]" );
  96. });
  97. }
  98. }それ以外{
  99. isShowImg = false ;
  100. $( this ).parent().prev().animate({marginTop: "0px" },300);
  101. }
  102. });
  103. $( ".postBtn" ).click(関数(){
  104. アラート($( ".Input_text" ).val());
  105. });
  106. },
  107. insertAtCursor:関数(myField, myValue) {
  108.      if (ドキュメント選択) {
  109. myField.focus();
  110. sel = document.selection.createRange();
  111. sel.text = myValue;
  112. sel.select();
  113. }それ以外  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.          （トップを復元＞0）の場合{
  119. myField.scrollTop = 先頭を復元します。
  120. }
  121. myField.focus();
  122. myField.selectionStart = 開始位置 myValue.length;
  123. myField.selectionEnd = 開始位置 myValue.length;
  124. }それ以外{
  125. myField.value = myValue;
  126. myField.focus();
  127. }
  128. }
  129. }

<<:  HTMLタグと基本要素の学習のまとめ

>>:  Docker を使ってゼロから SOLO 個人ブログを構築する方法

推薦する

Vue におけるキープアライブ マルチレベル ルーティング キャッシュの問題

目次1. 問題の説明2. 原因分析3. 解決策4. 処理1. 問題の説明調整センターでは、最後の 2...

ベンダー プレフィックス: ブラウザ エンジン プレフィックスが必要なのはなぜですか?

ベンダープレフィックスとは何ですか?ベンダー プレフィックス - ブラウザー エンジン プレフィック...

Vueコンポーネント通信のさまざまな方法の詳細な説明

目次1. 父から息子へ2. 息子から父へ3. 親子関係のないコンポーネントの値の転送4. ヴュークス...

MySQLコンテナ間のレプリケーション構成例の詳細な説明

背景先週、会社で MySQL レプリケーションのトレーニングを受けたので、今週末は学んだことを実践す...

Flutterを使用して移動可能なスタックウィジェット機能を作成する

この投稿では、キャンバスとドラッグ可能なノード インターフェースを使用するデスクトップおよび Web...

MySQLは間違ったパスワードを入力する試行回数を制御します

1. 本番環境でMySQLのデッドロックを監視し、デッドロックの可能性を減らす方法まず、デッドロック...

CSS3 を使用して円形スクロール プログレス バー アニメーションを作成する例

テーマ今日は、CSS3 を使用して円形スクロール プログレス バー アニメーションを作成する方法を説...

VueのRender関数

目次1. ノード、ツリー、仮想DOM 2. 仮想DOM 2.1 データオブジェクトの詳細2.2 制約...

CentOS 8 VMware 仮想マシンがインターネットにアクセスするための静的 IP ネットワーク カードの設定の詳細な説明

最初のステップ: VMwareで、「編集」-「仮想ネットワークエディタ」をクリックします。下図に示す...

MySQLのSQL文はインデックスを使用しません

インデックス集約を使用しない MySQL クエリご存知のとおり、インデックスを追加することはクエリ速...

Echarts 凡例コンポーネントのプロパティとソース コード

凡例コンポーネントは、ECharts でよく使用されるコンポーネントです。シリーズ マーカーの名前を...

Nginx ベースの Mencached キャッシュ構成の詳細な説明

導入Memcached は分散キャッシュ システムです。Memcached には認証とセキュリティ制...

CSS の div の下の同じ行にある複数の要素を右揃えにする

方法1:フロート:右さらに、フローティングにするとレイアウトがよりコンパクトになります（隙間がなくな...

既存のMySQLデータベースの文字セットを統一する方法

序文データベースでは、一部のデータ テーブルとデータは latin1 であり、一部のデータ テーブル...

MySQL 8.0.12 winx64 詳細なインストールチュートリアル

この記事では、MySQL 8.0.12のインストールチュートリアルを参考までに紹介します。具体的な内...