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 個人ブログを構築する方法

推薦する

MLSQLコンパイル時権限制御例の詳細な説明

序文MySQL の権限を簡単に理解すると、MySQL では自分の能力の範囲内で操作が許可され、その限...

MySQL で union all を使用してユニオンソートを取得する方法

プロジェクトでは、何らかの不可逆的な理由により、テーブルに保存されたデータがページの表示要件を満たす...

シンプルなリスト機能を実装するミニプログラム

この記事の例では、参考のために簡単なリスト機能を実装するアプレットの具体的なコードを共有しています。...

Dockerデータストレージの概要

この記事を読む前に、ボリューム、バインドマウント、tmpfs マウントの基本を理解しておいてください...

フロントエンド制作に関する簡単な議論: 互換性のために IE6 はまだ必要ですか?

国内市場ではIE6～7のサポートに対する一定の需要がまだありますが、フロントエンド開発者として、私た...

Centos8 に nginx1.9.1 をインストールする詳細な手順

1.17.9 本当はもっと美味しいNginx のダウンロード アドレス: https://nginx...

require/import キーワードを使用して v-for ループでローカル画像をインポートするいくつかの方法

目次問題の説明方法 1 (バックエンドが画像 URL を返す)方法 2 (フロントエンドで requ...

MySQLクエリ構文の概要

序文：この記事では主に、MySQL の where、group by、order by、limit、...

40以上の美しいWebフォームデザイン例

Web フォームは、訪問者と Web サイト所有者間の主要なコミュニケーション チャネルです。フィー...

MySQL ストレージエンジン InnoDB の設定と使用方法の説明

MyISAM と InnoDB は、MySQL で最も一般的なストレージ エンジンです。前回の記事で...

docker ベースの redis-sentinel クラスターの構築例

1. 概要Redis Cluster は、Redis ノードのグループ間での高可用性とシャーディング...

dockerを使用してdubboプロジェクトをデプロイする方法

1. まず、Springbootを使用して簡単なDubboテストプログラムを構築し、関連する依存関係...

MySQLのREDOログ（リドゥログ）とロールバックログ（アンドゥログ）の詳しい説明

序文：前回の記事では、MySQL システムでよく使用されるログをいくつか説明しました。実は、トランザ...

MySQLデータのグループ化の詳細な説明

グループを作成グループ化は、SELECT ステートメントの GROUP BY 句で設定されます。例：...

Reactでコンポーネントがどのように通信するかの詳細な説明

1. 何ですかコンポーネント間の通信は、次の 2 つの単語に分けることができます。コンポーネントコ...