HTML5仿手机微信聊天界面

网络
小园的景色，比想象的绿，绿色世界里溢出的那股泥土味，流过背着阳光的小土丘，一大片嫩绿涌入眼底，一粒粒草叶上滑落的雨滴，一朵朵淡黄的小花含着笑将露滴入另一处世界。

给大家带来的是HTML5仿手机微信聊天界面，截图效果如下：

源代码如下：

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPEhtml>
  2. <html>
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>HTML5模拟微信聊天界面</title>
  6. <style>
  7. /**重置标签默认样式*/
  8. *{
  9. margin:0;
  10. padding:0;
  11. list-style:none;
  12. font-family:'微软雅黑'
  13. }
  14. #container{
  15. width:450px;
  16. height:780px;
  17. background:#eee;
  18. margin:80pxauto0;
  19. position:relative;
  20. box-shadow:20px20px55px#777;
  21. }
  22. .header{
  23. background:#000;
  24. height:40px;
  25. color:#fff;
  26. line-height:34px;
  27. font-size:20px;
  28. padding:010px;
  29. }
  30. .footer{
  31. width:430px;
  32. height:50px;
  33. background:#666;
  34. position:absolute;
  35. bottom:0;
  36. padding:10px;
  37. }
  38. .footerinput{
  39. width:275px;
  40. height:45px;
  41. outline:none;
  42. font-size:20px;
  43. text-indent:10px;
  44. position:absolute;
  45. border-radius:6px;
  46. right:80px;
  47. }
  48. .footerspan{
  49. display:inline-block;
  50. width:62px;
  51. height:48px;
  52. background:#ccc;
  53. font-weight:900;
  54. line-height:45px;
  55. cursor:pointer;
  56. text-align:center;
  57. position:absolute;
  58. right:10px;
  59. border-radius:6px;
  60. }
  61. .footerspan:hover{
  62. color:#fff;
  63. background:#999;
  64. }
  65. #user_face_icon{
  66. display:inline-block;
  67. background:red;
  68. width:60px;
  69. height:60px;
  70. border-radius:30px;
  71. position:absolute;
  72. bottom:6px;
  73. left:14px;
  74. cursor:pointer;
  75. overflow:hidden;
  76. }
  77. img{
  78. width:60px;
  79. height:60px;
  80. }
  81. .content{
  82. font-size:20px;
  83. width:435px;
  84. height:662px;
  85. overflow:auto;
  86. padding:5px;
  87. }
  88. .contentli{
  89. margin-top:10px;
  90. padding-left:10px;
  91. width:412px;
  92. display:block;
  93. clear:both;
  94. overflow:hidden;
  95. }
  96. .contentliimg{
  97. float:left;
  98. }
  99. .contentlispan{
  100. background:#7cfc00;
  101. padding:10px;
  102. border-radius:10px;
  103. float:left;
  104. margin:6px10px010px;
  105. max-width:310px;
  106. border:1pxsolid#ccc;
  107. box-shadow:003px#ccc;
  108. }
  109. .contentliimg.imgleft{
  110. float:left;
  111. }
  112. .contentliimg.imgright{
  113. float:right;
  114. }
  115. .contentlispan.spanleft{
  116. float:left;
  117. background:#fff;
  118. }
  119. .contentlispan.spanright{
  120. float:right;
  121. background:#7cfc00;
  122. }
  123. </style>
  124. <script>
  125. window.onload=function(){
  126. vararrIcon=['http://www.xttblog.com/icons/favicon.ico','http://www.xttblog.com/wp-content/uploads/2016/03/123.png'];
  127. varnum=0;//控制头像改变
  128. variNow=-1;//用来累加改变左右浮动
  129. varicon=document.getElementById('user_face_icon').getElementsByTagName('img');
  130. varbtn=document.getElementById('btn');
  131. vartext=document.getElementById('text');
  132. varcontent=document.getElementsByTagName('ul')[0];
  133. varimg=content.getElementsByTagName('img');
  134. varspan=content.getElementsByTagName('span');
  136. icon[0].onclick=function(){
  137. if(num==0){
  138. this.src=arrIcon[1];
  139. num=1;
  140. }elseif(num==1){
  141. this.src=arrIcon[0];
  142. num=0;
  143. }
  144. }
  145. btn.onclick=function(){
  146. if(text.value==''){
  147. alert('不能发送空消息');
  148. }else{
  149. content.innerHTML+='<li><imgsrc="'+arrIcon[num]+'"><span>'+text.value+'</span></li>';
  150. iNow++;
  151. if(num==0){
  152. img[iNow].className+='imgright';
  153. span[iNow].className+='spanright';
  154. }else{
  155. img[iNow].className+='imgleft';
  156. span[iNow].className+='spanleft';
  157. }
  158. text.value='';
  159. //内容过多时,将滚动条放置到最底端
  160. contentcontent.scrollTop=content.scrollHeight;
  161. }
  162. }
  163. }
  164. </script>
  165. </head>
  166. <body>
  167. <divid="container">
  168. <divclass="header">
  169. <spanstyle="float:left;">业余草:模拟微信聊天界面</span>
  170. <spanstyle="float:right;">14:21</span>
  171. </div>
  172. <ulclass="content">
  173. <!--欢迎加入qq群：454796847、135430763-->
  174. </ul>
  175. <divclass="footer">
  176. <divid="user_face_icon">
  177. <imgsrc="http://www.xttblog.com/icons/favicon.ico"alt="">
  178. </div>
  179. <inputid="text"type="text"placeholder="说点什么吧...">
  180. <spanid="btn">发送</span>
  181. </div>
  182. </div>
  183. </body>
  184. </html>

以上就是本文的全部内容，是不是很精彩，希望对大家的学习有所帮助。

原文:http://www.xttblog.com/?p=265