DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML和Xhtml >> 利用HTML、CSS 實現帶表情的評論框的制作教程
利用HTML、CSS 實現帶表情的評論框的制作教程
編輯：HTML和Xhtml     

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

圖1

圖2

　　實現的代碼：

　　html代碼：

XML/HTML Code復制內容到剪貼板
  1. <div class="Main">     
  2.          <div class="Input_Box">     
  3.            <textarea class="Input_text"></textarea>     
  4.            <div class="faceDiv"> </div>     
  5.            <div class="Input_Foot"> <a class="imgBtn" href="javascript:void(0);"></a><a class="postBtn">確定</a> </div>     
  6.          </div>     
  7.        </div>    

　　css3代碼：

CSS Code復制內容到剪貼板
  1. .Input_Box {     
  2.     width: 495px;     
  3.     height: 160px;     
  4.     border: 1px solid #ccc;     
  5.     transition: 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-border-radius: 5px;     
  9.     -webkit-border-radius: 5px;     
  10.     border-radius: 5px;     
  11.     background-color: #fff;     
  12.     overflow: hidden;     
  13.     position: absolute;     
  14.     -moz-box-shadow: 0 0 5px #ccc;     
  15.     -webkit-box-shadow: 0 0 5px #ccc;     
  16.     box-shadow: 0 0 5px #ccc;     
  17. }     
  18. .Input_Box>textarea {     
  19.     width: 485px;     
  20.     height: 111px;     
  21.     padding: 5px;     
  22.     outline: none;     
  23.     border: 0px solid #fff;     
  24.     resize: none;     
  25.     font: 13px "微軟雅黑", Arial, Helvetica, sans-serif;     
  26.     -moz-border-radius: 5px;     
  27.     -webkit-border-radius: 5px;     
  28.     border-radius: 5px;     
  29. }     
  30. .Input_Foot {     
  31.     width: 100%;     
  32.     height: 35px;     
  33.     border-top: 1px solid #ccc;     
  34.     background-color: #fff;     
  35.     -moz-border-radius: 0 0 5px 5px;     
  36.     -webkit-border-radius: 0 0 5px 5px;     
  37.     border-radius: 0 0 5px 5px;     
  38.     position: absolute;     
  39. }     
  40. .imgBtn {     
  41.     float: left;     
  42.     margin-top: 8px;     
  43.     margin-left: 10px;     
  44.     background-image: url(imgs.png);     
  45.     background-repeat: no-repeat;     
  46.     background-position: 0 -13px;     
  47.     height: 18px;     
  48.     width: 20px;     
  49.     cursor: pointer     
  50. }     
  51. .imgBtn:active {     
  52.     margin-top: 9px;     
  53. }     
  54. .imgBtn:hover {     
  55.     background-position: 0 -31px     
  56. }     
  57. .postBtn {     
  58.     float: rightright;     
  59.     font: 13px "微軟雅黑", Arial, Helvetica, sans-serif;     
  60.     color: #808080;     
  61.     padding: 9px 20px 7px 20px;     
  62.     border-left: 1px solid #ccc;     
  63.     cursor: pointer;     
  64.     -moz-border-radius: 0 0 5px 0;     
  65.     -webkit-border-radius: 0 0 5px 0;     
  66.     border-radius: 0 0 5px 0;     
  67. }     
  68. .postBtn:hover {     
  69.     color: #333;     
  70.     background-color: #efefef;     
  71. }     
  72. .postBtn:active {     
  73.     padding: 10px 20px 6px 20px;     
  74. }     
  75. .faceDiv {     
  76.     width: 500px;     
  77.     height: 120px;     
  78.     border-top: 1px solid #ccc;     
  79.     position: absolute;     
  80.     background-color: #fff;     
  81.     -moz-border-radius: 5px 5px 0 0;     
  82.     -webkit-border-radius: 5px 5px 0 0;     
  83.     border-radius: 5px 5px 0 0;     
  84. }     
  85. .faceDiv>img {     
  86.     border: 1px solid #ccc;     
  87.     float: left;     
  88.     margin-left: -1px;     
  89.     margin-top: -1px;     
  90.     position: relative;     
  91.     width: 24px;     
  92.     height: 24px;     
  93.     padding: 3px 3px 3px 3px;     
  94.     cursor: pointer;     
  95. }     
  96. .faceDiv>img:hover {     
  97.     background-color: #efefef;     
  98. }     
  99. .faceDiv>img:active {     
  100.     padding: 4px 3px 2px 3px;     
  101. }    

　　Javascript代碼:

JavaScript Code復制內容到剪貼板
  1. var ImgIputHandler={     
  2.     facePath:[     
  3.         {faceName:"微笑",facePath:"0_微笑.gif"},     
  4.         {faceName:"撇嘴",facePath:"1_撇嘴.gif"},     
  5.         {faceName:"色",facePath:"2_色.gif"},     
  6.         {faceName:"發呆",facePath:"3_發呆.gif"},     
  7.         {faceName:"得意",facePath:"4_得意.gif"},     
  8.         {faceName:"流淚",facePath:"5_流淚.gif"},     
  9.         {faceName:"害羞",facePath:"6_害羞.gif"},     
  10.         {faceName:"閉嘴",facePath:"7_閉嘴.gif"},     
  11.         {faceName:"大哭",facePath:"9_大哭.gif"},     
  12.         {faceName:"尴尬",facePath:"10_尴尬.gif"},     
  13.         {faceName:"發怒",facePath:"11_發怒.gif"},     
  14.         {faceName:"調皮",facePath:"12_調皮.gif"},     
  15.         {faceName:"龇牙",facePath:"13_龇牙.gif"},     
  16.         {faceName:"驚訝",facePath:"14_驚訝.gif"},     
  17.         {faceName:"難過",facePath:"15_難過.gif"},     
  18.         {faceName:"酷",facePath:"16_酷.gif"},     
  19.         {faceName:"冷汗",facePath:"17_冷汗.gif"},     
  20.         {faceName:"抓狂",facePath:"18_抓狂.gif"},     
  21.         {faceName:"吐",facePath:"19_吐.gif"},     
  22.         {faceName:"偷笑",facePath:"20_偷笑.gif"},     
  23.         {faceName:"可愛",facePath:"21_可愛.gif"},     
  24.         {faceName:"白眼",facePath:"22_白眼.gif"},     
  25.         {faceName:"傲慢",facePath:"23_傲慢.gif"},     
  26.         {faceName:"饑餓",facePath:"24_饑餓.gif"},     
  27.         {faceName:"困",facePath:"25_困.gif"},     
  28.         {faceName:"驚恐",facePath:"26_驚恐.gif"},     
  29.         {faceName:"流汗",facePath:"27_流汗.gif"},     
  30.         {faceName:"憨笑",facePath:"28_憨笑.gif"},     
  31.         {faceName:"大兵",facePath:"29_大兵.gif"},     
  32.         {faceName:"奮斗",facePath:"30_奮斗.gif"},     
  33.         {faceName:"咒罵",facePath:"31_咒罵.gif"},     
  34.         {faceName:"疑問",facePath:"32_疑問.gif"},     
  35.         {faceName:"噓",facePath:"33_噓.gif"},     
  36.         {faceName:"暈",facePath:"34_暈.gif"},     
  37.         {faceName:"折磨",facePath:"35_折磨.gif"},     
  38.         {faceName:"衰",facePath:"36_衰.gif"},     
  39.         {faceName:"骷髅",facePath:"37_骷髅.gif"},     
  40.         {faceName:"敲打",facePath:"38_敲打.gif"},     
  41.         {faceName:"再見",facePath:"39_再見.gif"},     
  42.         {faceName:"擦汗",facePath:"40_擦汗.gif"},     
  43.              
  44.         {faceName:"摳鼻",facePath:"41_摳鼻.gif"},     
  45.         {faceName:"鼓掌",facePath:"42_鼓掌.gif"},     
  46.         {faceName:"糗大了",facePath:"43_糗大了.gif"},     
  47.         {faceName:"壞笑",facePath:"44_壞笑.gif"},     
  48.         {faceName:"左哼哼",facePath:"45_左哼哼.gif"},     
  49.         {faceName:"右哼哼",facePath:"46_右哼哼.gif"},     
  50.         {faceName:"哈欠",facePath:"47_哈欠.gif"},     
  51.         {faceName:"鄙視",facePath:"48_鄙視.gif"},     
  52.         {faceName:"委屈",facePath:"49_委屈.gif"},     
  53.         {faceName:"快哭了",facePath:"50_快哭了.gif"},     
  54.         {faceName:"陰險",facePath:"51_陰險.gif"},     
  55.         {faceName:"親親",facePath:"52_親親.gif"},     
  56.         {faceName:"嚇",facePath:"53_嚇.gif"},     
  57.         {faceName:"可憐",facePath:"54_可憐.gif"},     
  58.         {faceName:"菜刀",facePath:"55_菜刀.gif"},     
  59.         {faceName:"西瓜",facePath:"56_西瓜.gif"},     
  60.         {faceName:"啤酒",facePath:"57_啤酒.gif"},     
  61.         {faceName:"籃球",facePath:"58_籃球.gif"},     
  62.         {faceName:"乒乓",facePath:"59_乒乓.gif"},     
  63.         {faceName:"擁抱",facePath:"78_擁抱.gif"},     
  64.         {faceName:"握手",facePath:"81_握手.gif"},     
  65.         {faceName:"得意地笑",facePath:"得意地笑.gif"},     
  66.         {faceName:"聽音樂",facePath:"聽音樂.gif"}     
  67.     ]     
  68.     ,     
  69.     Init:function(){     
  70.         var isShowImg=false;     
  71.         $(".Input_text").focusout(function(){     
  72.             $(this).parent().css("border-color", "#cccccc");     
  73.             $(this).parent().css("box-shadow", "none");     
  74.             $(this).parent().css("-moz-box-shadow", "none");     
  75.             $(this).parent().css("-webkit-box-shadow", "none");     
  76.         });     
  77.         $(".Input_text").focus(function(){     
  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(function(){     
  84.             if(isShowImg==false){     
  85.                 isShowImg=true;     
  86.                 $(this).parent().prev().animate({marginTop:"-125px"},300);     
  87.                 if($(".faceDiv").children().length==0){     
  88.                     for(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(function(){     
  92.                               
  93.                         isShowImg=false;     
  94.                         $(this).parent().animate({marginTop:"0px"},300);     
  95.                         ImgIputHandler.insertAtCursor($(".Input_text")[0],"[" $(this).attr("title") "]");     
  96.                     });     
  97.                 }     
  98.             }else{     
  99.                 isShowImg=false;     
  100.                 $(this).parent().prev().animate({marginTop:"0px"},300);     
  101.             }     
  102.         });     
  103.         $(".postBtn").click(function(){     
  104.             alert($(".Input_text").val());     
  105.         });     
  106.     },     
  107.     insertAtCursor:function(myField, myValue) {     
  108.     if (document.selection) {     
  109.         myField.focus();     
  110.         sel = document.selection.createRange();     
  111.         sel.text = myValue;     
  112.         sel.select();     
  113.     } else if (myField.selectionStart || 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.         if (restoreTop > 0) {     
  119.             myField.scrollTop = restoreTop;     
  120.         }     
  121.         myField.focus();     
  122.         myField.selectionStart = startPos   myValue.length;     
  123.         myField.selectionEnd = startPos   myValue.length;     
  124.     } else {     
  125.         myField.value  = myValue;     
  126.         myField.focus();     
  127.     }     
  128. }     
  129. }    
HTML和Xhtml
HTML教程:定義列表
原文：http://andymao.com/andy/post/104.html 上一節：有序列表
理論知識:PSD模板切成HTML的正確操作
網頁制作poluoluo文章簡介：要想做出能靈活切換皮膚，讓css主導表現，還有很多要注意的地方，但
HTML checkbox 點擊說明文字即可選擇/取消勾選狀態
web開發中，由於checkbox比較小用戶操作起來不是很方便，為了方便用戶對checkbox操作我

相關文章

HTML入門知識HTML5教程關於HTMLHTML和XhtmlHTML5特效代碼HTML5詳解
小編推薦
W3C CEO Jaffe博士:HTML 5視頻格式規范 HTML中iFrame標簽的兩個用法介紹 近期熱點:HTML5是否真的可以取代Flash HTML標簽語義化的介紹 關於html水平垂直居中的問題小結 網頁設計初學者必看的30個網頁制作秘笈 HTML5實例教程:網頁表單Form標簽的屬性 用image來提交form不想使用button提交form zen coding for editplus 實例代碼說明 HTML相對路徑 上級目錄及下級目錄的寫法
熱門推薦
HTML 提高頁面加載速度的方法 html中使用js來獲取本地系統時間 漂亮樣式表在XHTML+CSS網頁制作中的應用 Html中版權符號的字體選擇問題(如何讓版權符號更美觀) HTML 5解析規則 HTML表格標記教程(28):單元格的邊框色屬性BORDERCOLOR 最常用的HTML轉義字符 Escape Sequence 網頁前端常見的攻擊方式和預防攻擊辦法 HTML5 Canvas的文本設置字體和大小
大家都在看
css值轉換成數值請拋棄parseInt jQuery中;function($,undefined) 前面的分號的用處 PHPExcel中的一些常用方法匯總 js操作二級聯動實現代碼 提高驗證設計的頻率和調整驗證設計的環節 jquery中each遍歷對象和數組示例 網頁木馬深度剖析以及手工清除 jquery實現保存已選用戶
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved