社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > web前端 > html教學 > 利用HTML、CSS 實作帶有表情的評論框的製作教學_HTML/Xhtml_網頁製作

利用HTML、CSS 實作帶有表情的評論框的製作教學_HTML/Xhtml_網頁製作

WBOY
發布： 2016-05-16 16:36:45
原創
2277 人瀏覽過

　　HTML帶表情的評論框，表情透過Json資料加載，可以根據自己的喜好改變表情。本評論框代碼為HTML，CSS，JQ三個方面的代碼。圖1為原始狀態，圖2為點擊表情時出現的表情列表，可任意選擇一個或多個。下面我們就來看看實作的程式碼。

圖1

圖2

　　實作的程式碼：

　　html代碼：

XML/HTML Code複製內容到剪貼簿
  1. div class=class=class=
  2. class=class=class=class=class=
  3. 類>               div div div >
  4.                  textarea >textarea>          
    5.            
  5. div div div div卷> div> >                 div class="Input_Foot"> a class="imgBtn" href="javascript:void(0);"
  6. a>a 
    7. class
  7. ="postBtn">確定
    8. a

a

a
 
div>               div>div>div>          div> 　　css3代碼： CSS Code複製內容到剪貼簿
  1. .Input_Box {     
  2.     寬度: 495px    
  3. 高度: 160px    邊框
    4. : 
  4. 1px 🎜>#ccc;          過渡：邊框線性0.2秒，盒子陰影線性0.5秒；          -moz-transition：
    5. 邊框
  5. 線性0.2秒，-moz-box-shadow線性0.5秒；         -webkit-transition：邊框
    6. 線性0.2秒，-webkit-box-shadow線性0.5秒；     
  6.     -moz-邊框
    7. -半徑：
  7. 5px；      -webkit-
    8. 邊框
  8. -半徑：5px；      邊框
    9. -半徑：
  9. 5px；     背景顏色: 
    10. #fff
  10. ;     溢出：隱藏
    11. ；    
  11. 隱藏；         位置：
  12. 絕對；    絕對；         -moz-box-shadow: 0 0 
    13. 5px
  13.  #ccc> #ccc>     -webkit-box-shadow: 0 0 
    14. 5px
  14.  #ccc> #ccc> #ccc
    15.     盒子陰影： 0 0 
  15. 5px #ccc #ccc
    16.  
  16. #ccc}     
  17. .Input_Box>textarea {     
  18.     寬度: 485px    
  19. 高度: 111px;       填入
  20. : 5px;         大綱： 
  21. 無；     邊框: 0px
  22. #fff;          調整大小： 無；          字體: 
  23. 13px 微軟, Arial
  24. , Helvetica, sans-serif, sans-serif     -moz-邊框-半徑：5px；      -webkit-邊框-半徑：
  25. 5px；      邊框-半徑：5px
  26. ； }      .Input_Foot {          
  27. 寬度：100%；          高度: 
  28. 35px;    
  29.     上邊框
  30. : 1px 
    31. #ccc
  31. ;          背景顏色: 
    32. #fff
  32. ;     -moz-邊框-半徑：0 0 5px ；          -webkit-
    33. 邊框
  33. -半徑：0 0 5px；          
  34. 邊框-半徑：0 0 5px

        位置：
    35. 絕對
  35. ；    絕對；     }     
  36. .imgBtn {     
  37.     浮動：左；    左
  38. ；  >     頁邊距: 8px; 
    39.     
  39. 左邊距: 10px;       
    40. 背景圖片
  40. : url(imgs.png);     背景重複
    41. : 
  41. 無重複;     背景位置：0 -
    42. 13px
  42. ；       高度: 18px
    43. ;
  43.     寬度: 20px;    
    44.     
  44. 遊標: 指針  }     
  45. .imgBtn:active {          頁邊距: 9px
    46. ; 
  46. }     
  47. .imgBtn:hover {     
  48.     背景位置：0 -31px  
    49. }     
    50. .postBtn {     
    51.     
  51. 浮動: 右    字體
  52. : 13px
  53.  微軟, 
  54. Arial, Helvetica, sans-serif, sans-serif
  55.     顏色: #808080;       內邊距: 9 像素  7 像素 20 像素
  56. ;          左邊框: 1px
  57.  1px #ccc;          遊標：指針；         -moz-
    58. 邊框
  58. -半徑：0 0 5px    -webkit-邊框-半徑：0 0 5px    
    59. 邊框
  59. -半徑：0 0 5px }     
  60. .postBtn:hover {     
  61.     顏色: #333;
    62.     
  62. 背景顏色: #effefef;   }     
  63. .postBtn:active {     
  64.     內邊距
  65. : 10 像素  6 像素 20 像素;      }      .faceDiv {     
  66.     
    67. 寬度
  67. : 
    68. 500px
  68.     高度: 120px;    
  69.     上邊框: 1px 
    70. #ccc
  70. ;          位置：絕對；    絕對；    
  71.     背景顏色: #fff;     -moz-
  72. 邊框-半徑：5px  0 0；     
    73.     -webkit-
  73. 邊框-半徑：5px  0 0；          邊框
  74. -半徑：5px  }      .faceDiv>img {     
  75.     邊框: 1px 🎜>#ccc;     
    76.     
  76. 浮動
    77. ：
  77. 左
    78. ；    
  78. 左；  >     左邊距: -1px;         頁邊距: -
    79. 1px
  79. ;      職位: 相對
    80.  
  80.     寬度: 24px;    
    81.     
  81. 高度: 24px;         
    82. 內邊距
  82. : 3px >3px 3px
  83. ;          遊標：指針
    84. ；    
  84. }     
  85. .faceDiv>img:hover {     
  86.     background-color: #efefef;  
    87. }     
    88. .faceDiv>img:active {     
    89.     
  89. padding: 4px 🎜>2px 3px;      }     　　
    90. Javascript程式碼:
JavaScript Code
複製內容到剪貼簿

  1. var ImgIputHandler={     
  2.     facePath:[     
  3.         {faceName:"微笑",facePath:"0_.gif",facePath:"0_ >
    4.         {faceName:
  4. "撇嘴",facePath:         {faceName:"色"
    5. ,facePath:
  5. "2_p.gif",facePath:"2_色.gif"         {faceName:"發呆",facePath:
  6.         {faceName:"得意",facePath:"4_yo.gif" >         {faceName:
  7. "流淚",facePath:"5_流淚. >         {faceName:"害羞",facePath:
    8. "6_害羞.gif"
  8.         {faceName:"閉嘴",facePath:"7_閉嘴.
  9.         {faceName:"大哭",facePath:"9_大哭.         {faceName:
  10. "尷尬",facePath:         {faceName:"發怒",facePath:
    11. "11_發怒. >
  11.         {faceName:"調皮",facePath:         {faceName:
  12. "齜牙",facePath:"13_gif🎜>,facePath:"13_gifm.         {faceName:
  13. "驚訝"、facePath:         {faceName:"難過",facePath:
  14.         {faceName:"酷",facePath:         {faceName:
  15. "冷汗",facePath:"17_冷汗. >         {faceName:"抓狂",facePath:
  16.         {faceName:"吐",facePath:"19_吐."         {faceName:
    17. "偷笑"
  17. ,facePath:"20_p.         {faceName:"可愛"
    18. ,facePath:
  18. "21_可愛.48         {faceName:"白眼",facePath:
    19.         {faceName:
  19. "傲慢",facePath:         {faceName:"飢餓"
    20. ,facePath:
  20. "24_飢餓gif",facePath:         {faceName:"困",facePath:"25_困."
  21.         {faceName:"驚恐",facePath:"26_驚恐. >         {faceName:
    22. "流汗"
  22. ,facePath:"27_.gif"         {faceName:"憨笑"
    23. 、facePath:
  23. >         {faceName:"大兵",facePath:
  24.         {faceName:"奮鬥",facePath:         {faceName:"罵人"
  25. ,facePath:         {faceName:"疑問",facePath:"32_疑問.."
  26.         {faceName:"噓",facePath:         {faceName:"暈"
  27. ,facePath:"34_暈."         {faceName:"折磨",facePath:
  28.         {faceName:"衰減",facePath:"36_衰減."         {faceName:"骷髏"
  29. ,facePath:"37_骷髏.,     
  30.         {faceName:"敲打",facePath:"38_敲."         {faceName:
    31. "再見"
  31. ,facePath: >         {faceName:"擦汗",facePath:
    32. "40_p.
  32.                       {faceName:"摳鼻"
    33. ,facePath:
  34.         {faceName:"鼓掌",facePath:         {faceName:
    35. "糗大了"
  35. ,facePath:"43_face>,facePath: },              {faceName:
  36. "壞笑",facePath:"44_壞笑.         {faceName:"左哼哼"
  37. ,facePath: },              {faceName:"右哼},     
  38.         {faceName:"哈欠",facePath: >         {faceName:"輕視"
  39. ,facePath: >         {faceName:"委屈",facePath:
  40.         {faceName:"快哭了",facePath:"50_快哭了. },              {faceName:
  41. "陰險",facePath:         {faceName:"親親",facePath:
  42. "52_親.親.         {faceName:"嚇",facePath:
  43.         {faceName:"可憐",facePath:"54_可憐."         {faceName:"菜刀"
  44. ,facePath:"55_ 刀. >         {faceName:"西瓜",facePath:"56_西瓜.gif",     
  45.         {faceName:"啤酒",facePath:         {faceName:
    46. "籃球"
  46. ,facePath:"58_1."         {faceName:"乒乓",facePath:"59_p. >
  47.         {faceName:"擁抱",facePath:"78_擁抱."         {faceName:
    48. "握手"
  48. ,facePath:"81_握手.."         {faceName:"得意地笑",facePath:
    49. "得意地笑.gif"
  49. ,facePath:"得意地笑.gif"         {faceName:"聽音樂"
    50. ,facePath:
  50. "聽音樂.gif",facePath:"聽音樂.gif"     ]     
  51.     ,          Init:function(){     
  52.         var
  53.  isShowImg=
  54.         $(".Input_text").focusout(function
    55. ).focusout(
  55. function).focusout(function).focusout(function            $(
  56. this).parent().css().parent().css().parent().css(
    57. "#cccccc"
  57. );                  $(this).parent().css().parent().css(
    58. ).parent().css(
  58. > "none");                  $(this).parent().css(
    59. ).parent().css(
  59. ).parent()。 "none");                  $(this).parent().css(
  60. ).parent().css().parent()。 "none");              }）；     
  61.         $(".Input_text").focus(函數).focus(函數
  62.         $(這個).parent().css("邊框顏色" 🎜>「rgba(19,105,172,.75)」);     
    63.         $(
  63. 這個).parent().css("box-shadow"「0 0 3px rgba(19,105,192,.5)」);              $(這個
  64. ).parent().css("-moz-box-shadow「0 0 3px rgba(241,39,232,.5)」);              $(這個).parent().css(
  65. "-webkit-box-shadow 「0 0 3px rgba(19,105,252,3)」);              });              $(".imgBtn"
  66. ).click(函數
  67.             if(isShowImg==                isShowImg=true
    68. ;
  68.                 $(這).parent().prev().animate({margino>).parent().prev().animate({1Topx 🎜>},300);                      
  69. if($(
    70.                     
  70. for(var i=0;i利用HTML、CSS 實作帶有表情的評論框的製作教學_HTML/Xhtml_網頁製作
    71.                         $(
  71. 🎜> ImgInputHandler. facePath [i].faceName "" src="face/" ImgInputHandler.facePath[i].facePath " />"
    72. " );     
  72.                     }     
  73.                     $(".face Div                                
    74.                         isShowImg=
  74.                         $(
  75. 這},300 ）；                              ImgIputHandler.insert"["
    76.  $(
  76. 這個).attr("標題") "]"
  77. );                     });                      }                  }其他{    {     
    78.                 isShowImg=
  78. false
  79.                 $(這
  80. ).parent().prev().animate({margino>).parent().prev().animate({margino>). >},300);                  }     
  81.         });              $(
    82. ".postBtn"
  82. ).click(函數).click(函數             alert($(
    83. ".Input_text"
  83. ).val());  
    84.         });     
    85.     },     
  85.     insertAtCursor:函數(myField, myValue) {     
  86.     if (文檔.選擇) {     
  87.         myField.focus();     
  88.         sel = document.selection.createRange();     
  89.         sel.text = myValue;              sel.select();     
  90.     } else if (myField.selectionStart || myField.selectionStartStartup== ) {              
    91. var
  91.  startPos = myField.selectionStart;              
    92. var
  92.  endPos = myField.selectionEnd;              
    93. var
  93.  restoreTop = myField.scrollTop;              myField.value = myField.value.substring(0, startPos)   myValue   myField.value.substring)   myValue   myField.value.substring(Fielth));     
  94.         
    95. if
  95.  (restoreTop > 0) {               myField.scrollTop = restoreTop;     
    96.         }     
    97.         myField.focus();     
    98.         myField.selectionStart = startPos   myValue.length;     
    99.         myField.selectionEnd = startPos   myValue.length;     
    100.     } 
  100. 其他
    101.  {     
  101.         myField.value  = myValue;     
    102.         myField.focus();     
    103.     }     
    104. }     
    105. }    

相關標籤：
html输入表情 html获取文本框的值 表情输入框
來源：php.cn
上一篇：使用vertical-align實作input和img對齊_HTML/Xhtml_網頁製作 下一篇：html用title屬性實作滑鼠懸停顯示文字_HTML/Xhtml_網頁製作
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
部分值條件下的記錄查詢 - SQL技巧分享 我有一個名為zipcode的表，其中有一個名為code的欄位。 Code列包含郵遞區號的前綴，例如395453302120312我想寫一個SQL查詢，檢查提供的zipcode是否與...
來自於 2024-04-06 16:01:26
0
1
395
控制台不顯示我提供的文字輸入 所以我正在使用formik在React中建立一個表單。我製作了一個TextInput元件，其中包含一個進行了一些更改的輸入欄位。當我使用changeHandler時，它應該會更新我...
來自於 2024-04-04 20:30:28
0
1
404
確保表格單元格的容器填入父級的整個高度 我嘗試在不使用Flexbox的情況下垂直對齊內容，因為我們的用例存在一些問題，所以我嘗試使用垂直對齊的表格來實現，但問題是裡面的內容沒有填充剩餘的高度，是否可以通過CSS以某種方式...
來自於 2024-04-04 16:03:18
0
1
404
使用 javascript 將附加價值新增至顯示的格式資料字段 我正在努力實現這一目標：我想創建一個表單來收集用戶輸入的資料並將其列印在螢幕上。到目前為止，我已經透過下面的程式碼片段實現了幾乎正常的效果，但是，我需要「textone」和「tex...
來自於 2024-04-04 15:17:13
0
1
3589
檢索 WooCommerce 客戶的付款方式歷史記錄 我找到了一個腳本，可以幫助我獲得所需的資訊：客戶歷史上在訂單中使用的付款方式。 $order=newWC_Order($order_id);$payment_title=$orde...
來自於 2024-04-04 14:57:11
0
1
428
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板