给大家带来的是HTML5仿手机微信聊天界面，截图效果如下：
源代码如下：
XML/HTML Code复制内容到剪贴板 <!DOCTYPEhtml> <html> <head> <metacharset="UTF-8"> <title>HTML5模拟微信聊天界面</title> <style> /**重置标签默认样式*/ *{ margin:0; padding:0; list-style:none; font-family:'微软雅黑' } #container{ width:450px; height:780px; background:#eee; margin:80pxauto0; position:relative; box-shadow:20px20px55px#777; } .header{ background:#000; height:40px; color:#fff; line-height:34px; font-size:20px; padding:010px; } .footer{ width:430px; height:50px; background:#666; position:absolute; bottom:0; padding:10px; } .footerinput{ width:275px; height:45px; outline:none; font-size:20px; text-indent:10px; position:absolute; border-radius:6px; right:80px; } .footerspan{ display:inline-block; width:62px; height:48px; background:#ccc; font-weight:900; line-height:45px; cursor:pointer; text-align:center; position:absolute; right:10px; border-radius:6px; } .footerspan:hover{ color:#fff; background:#999; } #user_face_icon{ display:inline-block; background:red; width:60px; height:60px; border-radius:30px; position:absolute; bottom:6px; left:14px; cursor:pointer; overflow:hidden; } img{ width:60px; height:60px; } .content{ font-size:20px; width:435px; height:662px; overflow:auto; padding:5px; } .contentli{ margin-top:10px; padding-left:10px; width:412px; display:block; clear:both; overflow:hidden; } .contentliimg{ float:left; } .contentlispan{ background:#7cfc00; padding:10px; border-radius:10px; float:left; margin:6px10px010px; max-width:310px; border:1pxsolid#ccc; box-shadow:003px#ccc; } .contentliimg.imgleft{ float:left; } .contentliimg.imgright{ float:right; } .contentlispan.spanleft{ float:left; background:#fff; } .contentlispan.spanright{ float:right; background:#7cfc00; } </style> <script> window.onload=function(){ vararrIcon=['http://www.xttblog.com/icons/favicon.ico','http://www.xttblog.com/wp-content/uploads/2016/03/123.png']; varnum=0;//控制头像改变 variNow=-1;//用来累加改变左右浮动 varicon=document.getElementById('user_face_icon').getElementsByTagName('img'); varbtn=document.getElementById('btn'); vartext=document.getElementById('text'); varcontent=document.getElementsByTagName('ul')[0]; varimg=content.getElementsByTagName('img'); varspan=content.getElementsByTagName('span'); icon[0].onclick=function(){ if(num==0){ this.src=arrIcon[1]; num=1; }elseif(num==1){ this.src=arrIcon[0]; num=0; } } btn.onclick=function(){ if(text.value==''){ alert('不能发送空消息'); }else{ content.innerHTML+='<li><imgsrc="'+arrIcon[num]+'"><span>'+text.value+'</span></li>'; iNow++; if(num==0){ img[iNow].className+='imgright'; span[iNow].className+='spanright'; }else{ img[iNow].className+='imgleft'; span[iNow].className+='spanleft'; } text.value=''; //内容过多时,将滚动条放置到最底端 contentcontent.scrollTop=content.scrollHeight; } } } </script> </head> <body> <divid="container"> <divclass="header"> <spanstyle="float:left;">业余草:模拟微信聊天界面</span> <spanstyle="float:right;">14:21</span> </div> <ulclass="content"> <> </ul> <divclass="footer"> <divid="user_face_icon"> <imgsrc="http://www.xttblog.com/icons/favicon.ico"alt=""> </div> <inputid="text"type="text"placeholder="说点什么吧..."> <spanid="btn">发送</span> </div> </div> </body> </html>
以上就是本文的全部内容，是不是很精彩，希望对大家的学习有所帮助。
原文:http://www.xttblog.com/?p=265
【HTML5仿手机微信聊天界面】相关文章：