欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

利用HTML、CSS 实现带表情的评论框的制作教程_HTML/Xhtml_网页制作

程序员文章站 2022-04-24 19:46:31
...
  HTML带表情的评论框,表情通过Json数据加载,可以根据自己的喜好改变表情。本评论框代码为HTML,CSS,JQ三个方面的代码。图1为原始状态,图2为点击表情时出现的表情列表,可以任意选择一个或者多个。下面我们来看看实现的代码。

利用HTML、CSS 实现带表情的评论框的制作教程_HTML/Xhtml_网页制作

图1

利用HTML、CSS 实现带表情的评论框的制作教程_HTML/Xhtml_网页制作

图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. {faceName:"抠鼻",facePath:"41_抠鼻.gif"},
  44. {faceName:"鼓掌",facePath:"42_鼓掌.gif"},
  45. {faceName:"糗大了",facePath:"43_糗大了.gif"},
  46. {faceName:"坏笑",facePath:"44_坏笑.gif"},
  47. {faceName:"左哼哼",facePath:"45_左哼哼.gif"},
  48. {faceName:"右哼哼",facePath:"46_右哼哼.gif"},
  49. {faceName:"哈欠",facePath:"47_哈欠.gif"},
  50. {faceName:"鄙视",facePath:"48_鄙视.gif"},
  51. {faceName:"委屈",facePath:"49_委屈.gif"},
  52. {faceName:"快哭了",facePath:"50_快哭了.gif"},
  53. {faceName:"阴险",facePath:"51_阴险.gif"},
  54. {faceName:"亲亲",facePath:"52_亲亲.gif"},
  55. {faceName:"吓",facePath:"53_吓.gif"},
  56. {faceName:"可怜",facePath:"54_可怜.gif"},
  57. {faceName:"菜刀",facePath:"55_菜刀.gif"},
  58. {faceName:"西瓜",facePath:"56_西瓜.gif"},
  59. {faceName:"啤酒",facePath:"57_啤酒.gif"},
  60. {faceName:"篮球",facePath:"58_篮球.gif"},
  61. {faceName:"乒乓",facePath:"59_乒乓.gif"},
  62. {faceName:"拥抱",facePath:"78_拥抱.gif"},
  63. {faceName:"握手",facePath:"81_握手.gif"},
  64. {faceName:"得意地笑",facePath:"得意地笑.gif"},
  65. {faceName:"听音乐",facePath:"听音乐.gif"}
  66. ]
  67. ,
  68. Init:function(){
  69. var isShowImg=false;
  70. $(".Input_text").focusout(function(){
  71. $(this).parent().css("border-color", "#cccccc");
  72. $(this).parent().css("box-shadow", "none");
  73. $(this).parent().css("-moz-box-shadow", "none");
  74. $(this).parent().css("-webkit-box-shadow", "none");
  75. });
  76. $(".Input_text").focus(function(){
  77. $(this).parent().css("border-color", "rgba(19,105,172,.75)");
  78. $(this).parent().css("box-shadow", "0 0 3px rgba(19,105,192,.5)");
  79. $(this).parent().css("-moz-box-shadow", "0 0 3px rgba(241,39,232,.5)");
  80. $(this).parent().css("-webkit-box-shadow", "0 0 3px rgba(19,105,252,3)");
  81. });
  82. $(".imgBtn").click(function(){
  83. if(isShowImg==false){
  84. isShowImg=true;
  85. $(this).parent().prev().animate({marginTop:"-125px"},300);
  86. if($(".faceDiv").children().length==0){
  87. for(var i=0;i
  88. $(".faceDiv").append("利用HTML、CSS 实现带表情的评论框的制作教程_HTML/Xhtml_网页制作 ImgIputHandler.facePath[i].faceName "\" src=\"face/" ImgIputHandler.facePath[i].facePath "\" />");
  89. }
  90. $(".faceDiv>img").click(function(){
  91. isShowImg=false;
  92. $(this).parent().animate({marginTop:"0px"},300);
  93. ImgIputHandler.insertAtCursor($(".Input_text")[0],"[" $(this).attr("title") "]");
  94. });
  95. }
  96. }else{
  97. isShowImg=false;
  98. $(this).parent().prev().animate({marginTop:"0px"},300);
  99. }
  100. });
  101. $(".postBtn").click(function(){
  102. alert($(".Input_text").val());
  103. });
  104. },
  105. insertAtCursor:function(myField, myValue) {
  106. if (document.selection) {
  107. myField.focus();
  108. sel = document.selection.createRange();
  109. sel.text = myValue;
  110. sel.select();
  111. } else if (myField.selectionStart || myField.selectionStart == "0") {
  112. var startPos = myField.selectionStart;
  113. var endPos = myField.selectionEnd;
  114. var restoreTop = myField.scrollTop;
  115. myField.value = myField.value.substring(0, startPos) myValue myField.value.substring(endPos, myField.value.length);
  116. if (restoreTop > 0) {
  117. myField.scrollTop = restoreTop;
  118. }
  119. myField.focus();
  120. myField.selectionStart = startPos myValue.length;
  121. myField.selectionEnd = startPos myValue.length;
  122. } else {
  123. myField.value = myValue;
  124. myField.focus();
  125. }
  126. }
  127. }