首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

HTML5仿手机微信聊天界面

Posted in HTML / CSS onMarch 18, 2016

给大家带来的是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.   
  136.             icon[0].onclick = function(){   
  137.                 if(num==0){   
  138.                     this.src = arrIcon[1];   
  139.                     num = 1;   
  140.                 }else if(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><img src="'+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.     <div id="container">  
  168.         <div class="header">  
  169.             <span style="float: left;">业余草:模拟微信聊天界面</span>  
  170.             <span style="float: right;">14:21</span>  
  171.         </div>  
  172.         <ul class="content">  
  173.    <!-- 欢迎加入qq群：454796847、135430763 -->  
  174.   </ul>  
  175.         <div class="footer">  
  176.             <div id="user_face_icon">  
  177.                 <img src="http://www.xttblog.com/icons/favicon.ico" alt="">  
  178.             </div>  
  179.             <input id="text" type="text" placeholder="说点什么吧...">  
  180.             <span id="btn">发送</span>  
  181.         </div>  
  182.     </div>  
  183. </body>  
  184. </html>  

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

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

HTML5仿手机微信聊天界面

- Author -

业余草

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
详解CSS3的opacity属性设置透明效果的用法
May 09 HTML / CSS
css3 pointer-events 介绍详解
Sep 18 HTML / CSS
CSS3实现王者荣耀匹配人员加载页面的方法
Apr 16 HTML / CSS
canvas实现俄罗斯方块的方法示例
Dec 13 HTML / CSS
利用html5 file api读取本地文件示例(如图片、PDF等)
Mar 07 HTML / CSS
HTML5验证以及日期显示的实现详解
Jul 05 HTML / CSS
html5教程实现Photoshop渐变色效果
Dec 04 HTML / CSS
html5 canvas fillRect坐标和大小的问题解决方法
Mar 26 HTML / CSS
移动端开发HTML5页面点击按钮后出现闪烁或黑色背景的解决办法
Sep 19 HTML / CSS
HTML5视频播放插件 video.js介绍
Sep 29 HTML / CSS
AmazeUI 等分网格的实现示例
Aug 25 HTML / CSS
如何使用 resize 实现图片切换预览功能
Aug 23 HTML / CSS
HTML5 Canvas实现文本对齐的方法总结
Mar 24 #HTML / CSS
使用HTML5 Canvas API中的clip()方法裁剪区域图像
Mar 25 #HTML / CSS
HTML5 Canvas API中drawImage()方法的使用实例
Mar 25 #HTML / CSS
深入研究HTML5实现图片压缩上传功能
Mar 25 #HTML / CSS
移动web模拟客户端实现多方框输入密码效果【附代码】
Mar 25 #HTML / CSS
HTML5打开本地app应用的方法
Mar 31 #HTML / CSS
如何在网站上添加谷歌定位信息
Apr 16 #HTML / CSS
SOA面试题(9) MySQL面试题(19) 自我鉴定(671) Servlet面试题(20) Delphi面试题(13) PYTHON面试题(27) UNIX面试题(27) Javascript面试题(44) J2EE面试题(19) Ruby面试题(15)
You might like
编写自己的php扩展函数
2006/10/09 PHP
基于python发送邮件的乱码问题的解决办法
2013/04/25 PHP
php实现上传图片生成缩略图示例
2014/04/13 PHP
各种快递查询--Api接口
2016/04/26 PHP
ThinkPHP5.1框架页面跳转及修改跳转页面模版示例
2019/05/06 PHP
PHP实现的抓取小说网站内容功能示例
2019/06/27 PHP
基于jQuery的动态增删改查表格信息，可左键/右键提示（原创自Zjmainstay）
2012/07/31 Javascript
如何将JS的变量值传递给ASP变量
2012/12/10 Javascript
jQuery中triggerHandler()方法用法实例
2015/01/19 Javascript
JS继承用法实例分析
2015/02/05 Javascript
微信小程序 开发之快递查询功能的实现
2017/01/09 Javascript
完美实现js焦点轮播效果(一)
2017/03/07 Javascript
浅谈angularjs依赖服务注入写法的注意点
2017/04/24 Javascript
微信小程序 配置顶部导航条标题颜色的实现方法
2017/09/20 Javascript
浅谈ES6 模板字符串的具体使用方法
2017/11/07 Javascript
原生JavaScript实现Ajax异步请求
2017/11/19 Javascript
bootstrap select下拉搜索插件使用方法详解
2017/11/23 Javascript
JavaScript实现动态添加、移除元素或属性的方法分析
2019/01/03 Javascript
IE11下处理Promise及Vue的单项数据流问题
2019/07/24 Javascript
ant design vue datepicker日期选择器中文化操作
2020/10/28 Javascript
[02:07]DOTA2新英雄展现中国元素，完美“圣典”亮相央视
2016/12/19 DOTA
详解【python】str与json类型转换
2019/04/29 Python
python取余运算符知识点详解
2019/06/27 Python
Pycharm远程调试原理及具体配置详解
2019/08/08 Python
python同步windows和linux文件
2019/08/29 Python
Python树莓派学习笔记之UDP传输视频帧操作详解
2019/11/15 Python
Python爬取YY评级分数并保存数据实现过程解析
2020/06/01 Python
工程师必须了解的LRU缓存淘汰算法以及python实现过程
2020/10/15 Python
用CSS3和table标签实现一个圆形轨迹的动画的示例代码
2019/01/17 HTML / CSS
美国最大网上鞋店：Zappos
2016/07/25 全球购物
加拿大百叶窗和窗帘定制网站：Blinds
2017/01/30 全球购物
马来西亚在线健康商店：Medipal Malaysia
2020/04/13 全球购物
Ego Shoes官网：英国时髦鞋类品牌
2020/10/19 全球购物
业务助理岗位职责
2013/11/18 职场文书
亲戚结婚的请假条
2014/02/11 职场文书
2014年银行客户经理工作总结
2014/11/12 职场文书