废话不多说，上代码
html：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>聊天界面</title>
<link rel="stylesheet" type="text/css" href="css/chat.css" />
<script src="js/jquery-1.10.2.js"></script>
<script src="js/flexible.js"></script>
</head>
<body>
<header class="header">
<a class="back" href="javascript:history.back()"></a>
<h5 class="tit">追星星的人</h5>
<div class="right">资料</div>
</header>
<div class="message">
<div class="send">
<div class="time">05/22 06:30</div>
<div class="msg">
<img src="images/touxiang.png" alt="" />
<p><i class="msg_input"></i>你好在不在呀，妹子！</p>
</div>
</div>
<div class="show">
<div class="time">05/22 06:30</div>
<div class="msg">
<img src="images/touxiangm.png" alt="" />
<p><i clas="msg_input"></i>你好你好你好</p>
</div>
</div>
</div>
<div class="footer">
<img src="images/hua.png" alt="" />
<img src="images/xiaolian.png" alt="" />
<input type="text" />
<p>发送</p>
</div>
<script src="js/chat.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>css：
h5{
margin: 0;
}
img{
max-width: 100%;
vertical-align: middle
}
input{
outline: none;
}
body{
max-width: 720px;
margin: 0 auto;
background: #f1f1f1;
color:#333;
font-size: 0.26rem;
}
.header{
border-bottom: 1px solid #dfdfdf;
padding:0 0.2rem;
height: 1rem;
line-height: 1rem;
background: #fff;
position: fixed;
width: 100%;
max-width: 720px;
box-sizing: border-box;
z-index: 100;
}
.back{
position: absolute;
top: 0;
left: 0.3rem;
background:url("../images/left.png") no-repeat;
width: 0.2rem;
height:0.4rem;
margin-top: 0.34rem;
background-size: 0.2rem 0.4rem;
}
.header .tit{
font-size: 0.32rem;
vertical-align: middle;
text-align: center;
height: 1rem;
line-height: 1rem;
font-weight: normal;
}
.header .right{
position: absolute;
right: 0.3rem;
top: 0;
float: none;
font-size: 0.24rem;
line-height: 1.2rem;
}
.message{
background-color: #f1f1f1;
padding: 1.2rem 0.3rem 1rem 0.3rem;
}
.time{
font-size:0.24rem;
color:#999;
margin-bottom: 0.3rem;
text-align: center;
}
.footer{
position: fixed;
bottom: 0;
height:1rem;
background-color:#fff;
line-height:1rem;
width: 100%;
max-width: 720px;
border-top: 1px solid #ddd;
}
.footer img{
margin-left:0.2rem;
width: 0.5rem;
}
.footer input{
margin-left:0.2rem;
width:3.5rem;
height:0.64rem;
border-radius: 0.1rem;
border:0.01rem solid #ddd;
padding : 0 0.15rem;
}
.footer p{
width:1.2rem;
height:0.68rem;
font-size:0.3rem;
color:#fff;
line-height:0.68rem;
text-align:center;
background-color:#ddd;
border-radius: 0.1rem;
float:right;
margin-top:0.2rem;
margin-right:0.2rem;
}
.send:after,.show:after,.msg:after{
content: "";
clear: both;
display: table;
}
.msg>img{
width: 0.8rem;
float: left;
}
.msg>p{
float: left;
margin:0 0.4rem;
padding: 0.25rem;
background: #fff;
font-size: 0.3rem;
position: relative;
border-radius: 0.2rem;
max-width:5rem ;
box-sizing: border-box;
}
.msg_input{
position: absolute;
background: url("../images/msg-input.png") no-repeat;
background-size: 0.31rem auto;
width: 0.31rem;
height: 0.51rem;
left: -0.31rem;
top: 0.25rem;
}
.show .msg img,.show .msg p,.show .msg{
float: right;
}
.show .msg_input{
left: auto;
right: -0.11rem;
transform:rotate(180deg);
-ms-transform:rotate(180deg); /* IE 9 */
-moz-transform:rotate(180deg); /* Firefox */
-webkit-transform:rotate(180deg); /* Safari 和 Chrome */
-o-transform:rotate(180deg); /* Opera */
}
.send,.show{
padding-bottom: 0.3rem;
}
.alert_novip,.flower_num,.give_flower{
display: none;
padding: 0.3rem 0.5rem;
font-size: 0.28rem;
}
.alert_novip p,.flower_num p{
margin-bottom: 0.45rem;
.layui-layer-wrap button{
font-size: 0.28rem;
padding: 0.2rem 0.3rem;
margin-top: 0.1rem;
background: #f8f8f8;
border-radius: 10px;
}
}
.flower_num button{
padding: 0.2rem 0.5rem;
border-radius: 10px;
}
.layui-layer-wrap button:first-child{
float: left;
}
.layui-layer-wrap button:last-child{
float: right;
background: #FF7171;
color: #fff;
}
.alert_novip button{
padding: 0.2rem 0.3rem;
border-radius: 10px
}
.flower{
width: 0.8rem;
margin: 0 auto;
}
.give_flower{
text-align: center;
}
.give_flower p{
text-align: center;
line-height: 1.5;
}
.give_flower input{
width: 1rem;
margin-right: 0.1rem;
margin-top: 0.2rem;
}
.give_flower button{
display: block;
width: 3rem;
font-size: 0.28rem;
margin: 0 auto;
margin-top: 0.6rem;
float: none!important;
line-height: 0.65rem;
border-radius: 10px;
}
chat.js：
/*发送消息*/
function send(headSrc,str){
var html="<div class='send'><div class='msg'><img src="+headSrc+" />"+
"<p><i class='msg_input'></i>"+str+"</p></div></div>";
upView(html);
}
/*接受消息*/
function show(headSrc,str){
var html="<div class='show'><div class='msg'><img src="+headSrc+" />"+
"<p><i class='msg_input'></i>"+str+"</p></div></div>";
upView(html);
}
/*更新视图*/
function upView(html){
$('.message').append(html);
$('body').animate({scrollTop:$('.message').outerHeight()-window.innerHeight},200)
}
function sj(){
return parseInt(Math.random()*10)
}
$(function(){
$('.footer').on('keyup','input',function(){
if($(this).val().length>0){
$(this).next().css('background','#114F8E').prop('disabled',true);
}else{
$(this).next().css('background','#ddd').prop('disabled',false);
}
})
$('.footer p').click(function(){
show("./images/touxiangm.png",$(this).prev().val());
test();
})
})
/*测试数据*/
var arr=['我是小Q','好久没联系了！','你在想我么','怎么不和我说话','跟我聊会天吧'];
var imgarr=['images/touxiang.png','images/touxiangm.png']
test()
function test(){
$(arr).each(function(i){
setTimeout(function(){
send("images/touxiang.png",arr[i])
},sj()*500)
})
}
flexible.js
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if(clientWidth>=720){
docEl.style.fontSize = '100px';
}else{
docEl.style.fontSize = 100 * (clientWidth / 720) + 'px';
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);jquery-1.10.2.js:
/*-防止各大cdn公共库加载地址失效问题，此地址我们会时时监控，及调整以保障正常访问*/
/*当前为百度cdn公共库提供的jQuery-1.10.2*/
document.write("<script src='http://libs.baidu.com/jquery/1.10.2/jquery.min.js'><\/script>");图片：
