HTML5仿手机微信聊天界面

这篇文章主要为大家详细介绍了HTML5仿手机微信聊天界面的关键代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
 
 

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

源代码如下：

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="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: 80px auto 0;
  19. position: relative;
  20. box-shadow: 20px 20px 55px #777;
  21. }
  22. .header {
  23. background: #000;
  24. height: 40px;
  25. color: #fff;
  26. line-height: 34px;
  27. font-size: 20px;
  28. padding: 0 10px;
  29. }
  30. .footer {
  31. width: 430px;
  32. height: 50px;
  33. background: #666;
  34. position: absolute;
  35. bottom: 0;
  36. padding: 10px;
  37. }
  38. .footer input {
  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. .footer span {
  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. .footer span: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. .content li {
  89. margin-top: 10px;
  90. padding-left: 10px;
  91. width: 412px;
  92. display: block;
  93. clear: both;
  94. overflow: hidden;
  95. }
  96. .content li img {
  97. float: left;
  98. }
  99. .content li span{
  100. background: #7cfc00;
  101. padding: 10px;
  102. border-radius: 10px;
  103. float: left;
  104. margin: 6px 10px 0 10px;
  105. max-width: 310px;
  106. border: 1px solid #ccc;
  107. box-shadow: 0 0 3px #ccc;
  108. }
  109. .content li img.imgleft {
  110. float: left;
  111. }
  112. .content li img.imgright {
  113. float: right;
  114. }
  115. .content li span.spanleft {
  116. float: left;
  117. background: #fff;
  118. }
  119. .content li span.spanright {
  120. float: right;
  121. background: #7cfc00;
  122. }
  123. </style>
  124. <script>
  125. window.onload = function(){
  126. var arrIcon = ['http://www.xttblog.com/icons/favicon.ico','http://www.xttblog.com/wp-content/uploads/2016/03/123.png'];
  127. var num = 0;     //控制头像改变
  128. var iNow = -1;    //用来累加改变左右浮动
  129. var icon = document.getElementById('user_face_icon').getElementsByTagName('img');
  130. var btn = document.getElementById('btn');
  131. var text = document.getElementById('text');
  132. var content = document.getElementsByTagName('ul')[0];
  133. var img = content.getElementsByTagName('img');
  134. var span = content.getElementsByTagName('span');
  135. icon[0].onclick = function(){
  136. if(num==0){
  137. this.src = arrIcon[1];
  138. num = 1;
  139. }else if(num==1){
  140. this.src = arrIcon[0];
  141. num = 0;
  142. }
  143. }
  144. btn.onclick = function(){
  145. if(text.value ==''){
  146. alert('不能发送空消息');
  147. }else {
  148. content.innerHTML += '<li><img src="'+arrIcon[num]+'"><span>'+text.value+'</span></li>';
  149. iNow++;
  150. if(num==0){
  151. img[iNow].className += 'imgright';
  152. span[iNow].className += 'spanright';
  153. }else {
  154. img[iNow].className += 'imgleft';
  155. span[iNow].className += 'spanleft';
  156. }
  157. text.value = '';
  158. // 内容过多时,将滚动条放置到最底端
  159. contentcontent.scrollTop=content.scrollHeight;
  160. }
  161. }
  162. }
  163. </script>
  164. </head>
  165. <body>
  166. <div id="container">
  167. <div class="header">
  168. <span style="float: left;">业余草:模拟微信聊天界面</span>
  169. <span style="float: right;">14:21</span>
  170. </div>
  171. <ul class="content">
  172. <!-- 欢迎加入qq群：454796847、135430763 -->
  173. </ul>
  174. <div class="footer">
  175. <div id="user_face_icon">
  176. <img src="http://www.xttblog.com/icons/favicon.ico" alt="">
  177. </div>
  178. <input id="text" type="text" placeholder="说点什么吧...">
  179. <span id="btn">发送</span>
  180. </div>
  181. </div>
  182. </body>
  183. </html>

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

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

HTML5仿手机微信聊天界面的更多相关文章

  1. android 仿微信聊天界面，以及语音录制功能

    extends:http://104zz.iteye.com/blog/1709840 本例为模仿微信聊天界面UI设计,文字发送以及语言录制UI. 1先看效果图:     第一:chat.xml设计 ...

  2. Swift - 自定义单元格实现微信聊天界面

    1,下面是一个放微信聊天界面的消息展示列表,实现的功能有: (1)消息可以是文本消息也可以是图片消息 (2)消息背景为气泡状图片,同时消息气泡可根据内容自适应大小 (3)每条消息旁边有头像,在左边表示 ...

  3. Android:日常学习笔记(8)———开发微信聊天界面

    Android:日常学习笔记(8)———开发微信聊天界面 只做Nine-Patch图片 Nine-Patch是一种被特殊处理过的PNG图片,能够指定哪些区域可以被拉升,哪些区域不可以.

  4. HTML5仿微信聊天界面、微信朋友圈实例

    这几天使用H5开发了一个仿微信聊天前端界面,尤其微信底部编辑器那块处理的很好,使用HTML5来开发,虽说功能效果并没有微信那么全,但是也相当不错了,可以发送消息.表情,发送的消息自动回滚定位到底部,另 ...

  5. vue聊天室|h5+vue仿微信聊天界面|vue仿微信

    一.项目简介 基于Vue2.0+Vuex+vue-router+webpack2.0+es6+vuePhotoPreview+wcPop等技术架构开发的仿微信界面聊天室——vueChatRoom,实现 ...

  6. web版仿微信聊天界面|h5仿微信电脑端案例开发

    前几天开发了一款手机端h5仿微信聊天,人唯有不停学习才能进步,这段时间倒腾着整理了下之前项目,又重新在原先的那版基础上开发了一款仿微信聊天电脑端web版本,聊天页面又重新优化了多图预览.视频播放,右键 ...

  7. jquery 仿手机屏幕切换界面效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. android 仿QQ气泡聊天界面

    1.现在的QQ,微信等一些APP的聊天界面都是气泡聊天界面,左边是接收到的消息,右边是发送的消息, 这个效果其实就是一个ListView在加载它的Item的时候,分别用了不同的布局xml文件. 2.效 ...

  9. JS案例练习-手机微信聊天对话框

    先附图 CSS部分: <style> body{} *{;} li{list-style: none;} .container{ width:310px; height:600px; ma ...

随机推荐

  1. ASP.NET中共有哪几种类型的控件？其中，HTML控件、HTML服务器控件和WEB服务器控件之间有什么区别

    ASP.NET的控件包括WEB服务器控件.WEB用户控件.WEB自定义控件.HTML服务器控件和HTML控件.HTML控件.HTML服务器控件和WEB服务器控件之间的区别如下所示.q      HTM ...

  2. Java基础15：深入剖析Java枚举类

    更多内容请关注微信公众号[Java技术江湖] 这是一位阿里 Java 工程师的技术小站,作者黄小斜,专注 Java 相关技术:SSM.SpringBoot.MySQL.分布式.中间件.集群.Linux ...

  3. Chapter 4 Invitations——24

    "How do you do that?" I asked in amazed irritation. “你是怎么做到的?”我惊讶的问道. "Do what?" ...

  4. .NET快速信息化系统开发框架 V3.2->Web版本新增“文件管理中心”集上传、下载、文件共享等一身，非常实用的功能

    文件中心是3.2版本开始新增的一个非常实用功能,可以归档自己平时所需要的文件,也可以把文件分享给别人,更像一个知识中心.文件中心主界面如下图所示,左侧“我的网盘”展示了用户对文件的分类,只能自己看到, ...

  5. Hbase王国游记之：Hbase客户端API初体验

    §历史回顾 2018年岁末,李大胖朦胧中上了开往Hbase王国的车,伴着一声长鸣,列出缓缓驶出站台,奔向无垠的广袤. (图片来自于网络) 如不熟悉剧情的,可观看文章: 五分钟轻松了解Hbase列式存储 ...

  6. JSP知识点总结

    一.jsp静态包含和动态包含的区别 在学习request对象的时候,我们曾经使用过request.getRequestDispatcher(String url).include(request,re ...

  7. javascript基础修炼(9)——MVVM中双向数据绑定的基本原理

    开发者的javascript造诣取决于对[动态]和[异步]这两个词的理解水平. 一. 概述 1.1 MVVM模型 MVVM模型是前端单页面应用中非常重要的模型之一,也是Single Page Appl ...

  8. HTTP 常见的状态码

  9. Java 学习笔记 二维数组和对象数组

    定义二维数组 int[][] a = new int[4][5]; 可以不指定列数 int[][] a = new int[4][]; 获取行 int i = a.length(); 如果使用第一个例 ...

  10. java三大版本和核心优势

    javaSE(java standard Edition):标准版,定位在个人计算机上的应用. javaEE(java Enterprise Edition):企业版,定位在服务器端的应用.***** ...