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

推薦する

HTML テーブル境界制御実装コード

一般的に、テーブルを使用する場合は、常に <table border="1"...

Centos7 で keepalived ログを別のパスに設定する方法の詳細な説明

Keepalived のインストール: cd <keepalived_sourcecode_p...

mysqlは2つ以上のフィールドがNULLであるレコードを見つける問題を解決します

コアコード /*-------------------------------- 2つ以上のフィール...

Vueの自己ネストツリーコンポーネントの使い方の詳細な説明

この記事では、Vueの自己ネストツリーコンポーネントの使い方を参考までに紹介します。具体的な内容は次...

iframe でページを開く方法

解決：リンクのターゲット属性値をターゲット フレームワーク名と同じに設定するだけです。具体的な手順:...

Mysqlアカウント管理の原理と実装方法の詳細な説明

この記事では、例を使用して、MySQL アカウント管理の原則と実装方法を説明します。ご参考までに、詳...

画像拡大鏡効果のJSバージョン

この記事では、画像拡大鏡効果を実現するためのJSの具体的なコードを参考までに紹介します。具体的な内容...

ico ミラー コードを HTML に追加します (favicon.ico はルート ディレクトリに配置されます)

コード：コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC &...

ubuntu15.10 での hadoop2.7.2 の詳細なインストールと設定

Linux での Hadoop インストール チュートリアルはインターネットや書籍に多数ありますが、...

Navicat は CSV データを MySQL にインポートします

この記事では、Navicatを使用してcsvデータをmysqlにインポートする方法を参考までに紹介し...

MySQLの場合の使用例分析

まず、データベース テーブルを作成します。 テーブル `t_demo` を作成します ( `id` ...

CSSレイアウトにおけるフロート属性と位置属性の違い

CSS レイアウト - position プロパティposition 属性は、要素に適用する配置方法...

MySQL での select、distinct、limit の使用

目次1. はじめに2. 選択2.1 単一列のクエリ2.2 複数の列のクエリ2.3 すべての列をクエリ...

Docker に共通コンポーネント (mysql、redis) をインストールする方法

Dockerはmysqlをインストールします docker search mysql 検索 dock...

異なるデータベースで DROP TABLE を書く方法

異なるデータベースで DROP TABLE を書く方法1.MySQL 存在する場合はテーブルを削除 ...