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基础】【12String类】

    12.01_常见对象(Scanner的概述和方法介绍)(掌握) A:Scanner的概述 B:Scanner的构造方法原理 Scanner(InputStream source) System类下有一 ...

  2. 用户身份切换之初窥企业远程用户没root还有root权限

    一直很困扰我,既然企业不让用root不能登录,那怎么操作文件呢? 原来...... su -    用来切换初始变量 $PATH $HOME等 sudo 用的时候会su到root需要root的密码,这 ...

  3. Google SwipeRefreshLayout（Goolge官方下拉刷新控件）尝鲜

    前天Google官方终于出了Android刷新控件——SwipeRefreshLayout. 使用前先需要将android.support.v4.jar升级到19.1.升级后,可能会出现SDK版本与A ...

  4. Jenkins+Maven+Gitlab+Tomcat 自动化构建打包、部署

    一.环境需求 本帖针对的是Linux环境,Windows或其他系统也可借鉴.具体只讲述Jenkins配置以及整个流程的实现. 1.JDK(或JRE)及Java环境变量配置,我用的是JDK1.8.0_1 ...

  5. 【MongoDB】使用MongoVUE看不到插入的数据

    问题描述 明明在命令行中,输入mongodb的插入数据的命令,并且插入数据显示成功,却在MongoVUE可视化工具中,看不到插入的数据? mongodb使用版本为(3.4.6) mongoVUE使用版 ...

  6. js内存深入学习（二）

    继上一篇文章 js内存深入学习(一) 3. 内存泄漏 对于持续运行的服务进程(daemon),必须及时释放不再用到的内存.否则,内存占用越来越高,轻则影响系统性能,重则导致进程崩溃. 对于不再用到的内 ...

  7. [JavaScript] canvas 合成图片和文字

    Canvas Canvas 是 HTML5 新增的组件,就像一个画板,用 js 这杆笔,在上面乱涂乱画 创建一个 canvas <canvas id="stockGraph" ...

  8. .Net 接入CAS 遇到的坑

    关于CAS是个什么东西,就不多闲扯了,相信每个有过SSO经验的都听过CAS大名,百度百科地址: https://baike.baidu.com/item/CAS/1329561?fr=aladdin ...

  9. Spring（二）继承jdbcDaoSupport的方式实现(增删改查)

    一 首先创建数据库表和相应的字段,并创建约束 二 建立项目,导入jar包(ioc,aop,dao,数据库驱动,连接池)并且将applicationContext.xml文件放在src下 三 开启组件扫 ...

  10. 使用addviewController()实现无业务逻辑跳转

    需要实现WebMvcConfigurer类,重写addViewControllers方法. 添加@Configuration,等价于xml配置. package dbzx.config; import ...