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. 【Java基础】【04循环语句&方法】

    04.01_Java语言基础(循环结构概述和for语句的格式及其使用) A:循环结构的分类 for,while,do...while B:循环结构for语句的格式: for(初始化表达式;条件表达式; ...

  2. 超详细“零”基础kafka入门篇

    1.认识kafka 1.1 kafka简介 Kafka 是一个分布式流媒体平台 kafka官网:http://kafka.apache.org/ (1)流媒体平台有三个关键功能: 发布和订阅记录流,类 ...

  3. ubuntu 修改网卡名称 更改设备网卡名称 修改eno16777736为eth0 ubuntu 15.10网卡名称为eno16777736

    ubuntu linux 进入root用户,管理员模式 编辑这个文件需要管理员模式 在GRUB_CMD_LINUX后面增加图中所示 看到这个地方了没,有提示信息的,想要改变这个文件,记得运行 upda ...

  4. [T-SQL] NCL INDEX 欄位選擇效能影響-解析

    因為這篇文章寫的比較長一些,我就將總結先列出來 總結 1. 除了WHERE條件外,JOINColumn除了記得建立索引,也要注意到選擇性的高低,如果真的找不到可用的Column,可以考慮在兩邊關聯的表 ...

  5. MySQL 笔记整理（5） --深入浅出索引（下）

    笔记记录自林晓斌(丁奇)老师的<MySQL实战45讲> 5) --深入浅出索引(下) 这次的笔记从一个简单的查询开始: 建表语句是这样的 mysql> create table T ...

  6. eclipse中的出现在打包一次后，后面新建的项目都出错了，出现support_v7下面出现红线及解决方法及为什么eclipse中项目继承ActionBarActivity解决方法一样

    第一次写博客,有什么问题或者想法的希望各位可以进行评论交流,望大家多多包涵! 遇到的问题是在新建的项目都出错了,出现support_v7下面出现红线及解决方法及为什么eclipse中项目继承Actio ...

  7. sql 参数化查询问题

    一.正确案例 string name=“梅”; string sql="select * from test where  Name  like @Name"; //包含 梅Sql ...

  8. 微信小程序---require()

    我们可以通过require()来获取其它文件导出的数据,但要注意的是传给require的路径只能是相对路径. // 获取指定页面通过module.exports导出的数据 var postsData ...

  9. 美团技术沙龙01 - 58到家服务的订单调度&数据分析技术

    1. 2015.4.15 到家服务的订单调度&数据分析技术 58到家· 黄海斌 @xemoaya 2.agenda • 58到家介绍 • 订单管理系统介绍 • 数据分析技术的应用 3.2015 ...

  10. 微信小程序（五） 利用模板动态加载数据

    利用模板动态加载数据,其实是对上一节静态数据替换成动态数据: