HTML5仿手机微信聊天界面

给大家带来的是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>

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>

</body>

</html>

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

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

相关文章

最新文章

热门文章

猜你喜欢