参考微信网页版写了个聊天页面
先上传图片
好友聊天中的一些样式
群聊样式，增加了用户昵称的显示
HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ChatRoom</title>
<link type="text/css" rel="stylesheet" href="css/bootstrap/bootstrap.css">
<link type="text/css" rel="stylesheet" href="css/zoom.css">
<link type="text/css" rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="main">
<!-- Message Box-->
<div class="message-header">
<p class="header-text">李友爱</p>
</div>
<div class="message-box" data-spy="scroll" data-target="#navbar-example" data-offset="0" style="height: 100%; overflow:auto;">
<!-- Friend Bubble Text-->
<div class="message-left-text clear-both">
<img class="message-head" src="user/userOnly/images/head.jpg">
<div class="bubble-left">
<span class="arrow-left"></span>
<div class="bubble-other">
<p>你是猪吗？</p>
</div>
</div>
</div>
<!-- Me Bubble Text-->
<div class="message-me-text clear-both">
<img class="message-head message-head-me" src="image/head.jpg">
<div class="bubble-right">
<span class="arrow-right"></span>
<div class="bubble-me">
<p>这都被你看出来了~嘿嘿!!:)</p>
</div>
</div>
</div>
<!-- Friend Bubble Text-->
<div class="message-left-text clear-both">
<img class="message-head" src="user/userOnly/images/head.jpg">
<div class="bubble-left">
<span class="arrow-left"></span>
<div class="bubble-other">
<p>你妹啊，说你是猪你还真承认啊？一天天就知道吃吃吃...我也是真服你了，你说你咋这样呢？</p>
</div>
</div>
</div>
<!-- Me Bubble Pic-->
<div class="message-me-text clear-both">
<img class="message-head message-head-me" src="image/head.jpg">
<div class="bubble-right">
<img class="message-img" data-action="zoom" src="user/userOnly/images/img3.jpg">
</div>
</div>
<!-- Friend Bubble Pic-->
<div class="message-left-text clear-both">
<img class="message-head" src="user/userOnly/images/head.jpg">
<div class="bubble-left">
<img class="message-img" data-action="zoom" src="user/userOnly/images/img2.jpg">
</div>
</div>
<!-- Friend Bubble Voice-->
<div class="message-left-text clear-both">
<img class="message-head" src="user/userOnly/images/head.jpg">
<div class="bubble-left">
<span class="arrow-left"></span>
<div class="bubble-other">
<audio src="user/userOnly/audio/voice.mp3" id="voice"></audio>
<img class="message-audio" src="image/voice_left.png" id="PlayPause" onclick="PlayAudioLeft()"/>
</div>
</div>
<p class="audio-time">02'12</p>
</div>
<!-- Me Bubble Voice-->
<div class="message-me-text clear-both">
<img class="message-head message-head-me" src="image/head.jpg">
<div class="bubble-right">
<span class="arrow-right"></span>
<div class="bubble-me">
<audio src="user/userOnly/audio/voice2.mp3" id="voiceMe"></audio>
<img class="message-audio-right" src="image/voice_right.png" id="PlayPauseMe" onclick="PlayAudioRight()"/>
</div>
</div>
<p class="audio-time-me">02'12</p>
</div>
<!-- Friend Bubble Video-->
<div class="message-left-text clear-both">
<img class="message-head" src="user/userOnly/images/head.jpg">
<div class="bubble-left">
<video width='100%' class="message-video" controls> <source src="user/userOnly/video/video1.mp4" type='video/mp4'>
</div>
</div>
<!-- Me Bubble Video-->
<div class="message-me-text clear-both">
<img class="message-head message-head-me" src="image/head.jpg">
<div class="bubble-right">
<video width='100%' class="message-video" controls> <source src="user/userOnly/video/video2.mp4" type='video/mp4'>
</div>
</div>
<!-- Time Message-->
<div class="message-time clear-both">
<p class="message-time-details">
<span>2016-07-12 11:20</span>
</p>
</div>
<!-- Friend Bubble File-->
<div class="message-left-text clear-both">
<img class="message-head" src="user/userOnly/images/head.jpg">
<div class="bubble-left">
<a style="color: #424242;" href="#" class="file">
<img class="file-images" src="image/PDF.jpg">
<div class="file-text">
<h4>朋友圈导出文档<small>.pdf</small></h4>
<p>260k</p>
</div>
</a>
</div>
</div>
<!-- Me Bubble File-->
<div class="message-me-text clear-both">
<img class="message-head message-head-me" src="user/userOnly/images/head.jpg">
<div class="bubble-right">
<a style="color: #424242;" href="http://www.baidu.com" class="file">
<img class="file-images" src="image/P.jpg">
<div class="file-text">
<h4>这是我的即兴演讲的PPT文档<small>.pdf</small></h4>
<p>260k</p>
</div>
</a>
</div>
</div>
<!-- Friend Bubble RedBag-->
<div class="message-left-text clear-both">
<img class="message-head" src="user/userOnly/images/head.jpg">
<div class="bubble-left">
<div class="red-bag">
<div class="red-bag-title">
<img class="red-bag-img" src="image/RedBag.png">
<div class="red-bag-text">
<h4>恭喜发财 大吉大利<br/><small style="color: rgba(255, 255, 255, 0.4);">领取红包</small></h4>
</div>
</div>
<div class="red-bag-bottom">
<p>微信红包</p>
<img class="red-bag-img-bottom" src="image/RedBagS.png">
</div>
</div>
</div>
</div>
<!-- Red Bag Get-->
<div class="red-bag-details clear-both">
<p class="red-bag-open">
<span><img class="red-bag-open-image" src="image/RedBag.png"> 我领取了李友爱的红包</span>
</p>
</div>
<!-- Me Bubble Red Bag-->
<div class="message-me-text clear-both">
<img class="message-head message-head-me" src="image/head.jpg">
<div class="bubble-right">
<div class="red-bag">
<div class="red-bag-title">
<img class="red-bag-img" src="image/RedBag.png">
<div class="red-bag-text">
<h4>恭喜发财 大吉大利<br/><small style="color: rgba(255, 255, 255, 0.4);">领取红包</small></h4>
</div>
</div>
<div class="red-bag-bottom">
<p>微信红包</p>
<img class="red-bag-img-bottom" src="image/RedBagS.png">
</div>
</div>
</div>
</div>
<!-- Transfer -->
<div class="message-left-text clear-both">
<img class="message-head" src="image/head.jpg">
<div class="bubble-left">
<div class="transfer">
<div class="transfer-title">
<img class="red-bag-img" src="image/transfer.png">
<div class="red-bag-text">
<h4>转账给你<br/><small style="color: rgba(255, 255, 255, 0.6);">￥1314.00</small></h4>
</div>
</div>
<div class="red-bag-bottom">
<p>微信转账</p>
</div>
</div>
</div>
</div>
<!-- Transfer Get-->
<div class="message-me-text clear-both">
<img class="message-head message-head-me" src="image/head.jpg">
<div class="bubble-right">
<div class="transfer">
<div class="transfer-title">
<img class="red-bag-img" src="image/transfer_ok.png">
<div class="red-bag-text">
<h4>已收钱<br/><small style="color: rgba(255, 255, 255, 0.4);">￥1314.00</small></h4>
</div>
</div>
<div class="red-bag-bottom">
<p>微信红包</p>
</div>
</div>
</div>
</div>
<!-- Add Group-->
<div class="message-me-text clear-both">
<img class="message-head message-head-me" src="image/head.jpg">
<div class="bubble-right">
<div class="add-group">
<h4>邀请你加入群聊</h4>
<div class="add-group-text">
<p>Michelle邀请你加入我们的宝贝儿，进入可查看详情</p>
</div>
<img class="add-group-img" src="image/head2.jpg">
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/bootstrap/bootstrap.min.js"></script>
<script src="js/zoom.js"></script>
<script src="js/WechatMsg.js"></script>
</body>
</html>
主要的style样式
body{
font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", 微软雅黑, Arial, sans-serif;
background: url(../image/bg.jpg) no-repeat fixed;
background-size: 100% 100%;
-moz-background-size: 100% 100%;
}
ul{
padding: 0;
margin: 0;
}
li{
list-style: none;
}
p{
margin: 0;
padding: 0;
}
#main{
background-color: #eeeeee;
max-width: 800px;
min-width: 600px;
height: 100%;
margin: 0 auto;
padding: 0;
}
.panel{
background-color: #2e3238;
float: left;
height: 100%;
width: 280px;
margin: 0;
border-radius: 0px;
}
.header{
padding: 18px;
position: relative;
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
background-color: #26292e;
}
.MRbg{
margin: 120px 42%;
}
.MRbg img{
width: 120px;
}
.header .user-head{
display: table-cell;
vertical-align: middle;
word-wrap: break-word;
word-break: break-all;
white-space: nowrap;
padding-right: 10px;
}
.head-img{
width: 40px;
height: 40px;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
display: inline-block;
cursor: pointer;
}
.header .info{
display: table-cell;
vertical-align: middle;
word-wrap: break-word;
word-break: break-all;
width: 2000px;
}
.header .info .user-name{
color: #ffffff;
display: block;
font-size: 18px;
-webkit-margin-before: 0em;
-webkit-margin-after: 0em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
margin-left: 6px;
font-weight: 100;
}
.person-list{
position: relative;
}
.person-list li:hover{
background-color: rgba(0, 0, 0, 0.1);
}
.active{
background-color: #3a3f45;
width: 100%;
overflow: hidden;
}
.person{
padding: 10px 18px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.person-name{
color: rgba(255, 255, 255, 0.5);
display: inline-block;
padding: 0px 10px;
font-size: 14px;
vertical-align: top;
}
.clear-both{
clear: both;
}
.message-box{
padding: 40px 10px 0px 10px ;
max-width: 1000px;
min-width: 800px;
height: 100%;
overflow: auto;
}
.message-header{
width: 800px;
min-width: 600px;
height: 48px;
background-color: #f5f5f5;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
position: fixed;
margin: 0;
padding: 0;
}
.header-text{
text-align: center;
line-height: 48px;
}
.message-head{
width: 40px;
height: 40px;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
float: left;
cursor: pointer;
}
.message-head-me{
float: right;
}
.message-left-text{
padding: 20px 5px;
}
.message-me-text{
padding: 20px 5px;
}
.bubble-left{
float: left;
}
.bubble-right{
float: right;
}
.arrow-left{
float: left;
margin-top: 10px;
width:0;
height:0;
font-size:0;
border:solid 8px;
border-color:rgba(0,0,0,0) rgba(255,255,255,1) rgba(0,0,0,0) rgba(0,0,0,0);
display: inline-block;
}
.arrow-right{
float: right;
margin-top: 10px;
width:0;
height:0;
font-size:0;
border:solid 8px;
border-color:rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) rgba(177,227,124,1);
display: inline-block;
}
.bubble-other{
max-width: 420px;
min-height: 40px;
word-wrap:break-word;
background-color: #ffffff;
padding: 5px 8px;
border-radius: 2px;
display: inline-block;
}
.bubble-other-audio{
width: 120px;
padding: 5px 8px;
border-radius: 2px;
display: inline-block;
}
.bubble-other p{
margin: 0;
padding: 5px;
}
.bubble-me{
max-width: 420px;
min-height: 40px;
word-wrap:break-word;
background-color: #b1e37c;
padding: 5px 8px;
border-radius: 2px;
display: inline-block;
}
.message-img{
width: 180px;
border-radius: 2px;
margin: 0px 10px;
}
.message-video{
width: 240px;
border-radius: 2px;
margin: 0px 10px;
}
.bubble-me p{
margin: 0;
padding: 5px;
}
.message-audio{
width: 32px;
margin: 4px 20px 4px 40px;
}
.message-audio-right{
width: 32px;
margin: 4px 40px 4px 20px;
}
.file{
max-width: 280px;
min-height: 40px;
background-color: #ffffff;
padding: 10px;
border-radius: 2px;
display: inline-block;
margin: 0px 10px;
}
.file-images{
float: left;
width: 68px;
display: inline-block;
}
.file-text{
float: left;
margin-left: 10px;
}
.file-text h4{
font-size: 16px;
margin: 0;
padding: 0;
max-width: 180px;
word-wrap:break-word;
}
.file-text p{
font-size: 12px;
color: #9c9c9c;
margin-top: 5px;
}
.red-bag{
width: 220px;
background-color: #ffffff;
border-radius: 2px;
display: inline-block;
margin: 0px 10px;
}
.red-bag-title{
background-color: #fc9d2b;
border-radius: 2px 2px 0px 0px;
padding: 10px;
}
.red-bag-img{
width: 40px;
float: left;
display: inline-block;
}
.red-bag-text{
margin-left: 50px;
}
.red-bag-text h4{
font-size: 16px;
margin: 0;
padding: 0;
color: #ffffff;
max-width: 180px;
min-height: 50px;
word-wrap:break-word;
}
.red-bag-bottom{
clear: both;
padding: 6px;
}
.red-bag-bottom p{
color: #7f7f7f;
float: left;
font-size: 12px;
margin: 0;
padding: 0;
}
.red-bag-img-bottom{
float: right;
width: 16px;
}
.red-bag-open{
text-align: center;
margin: 10px auto;
max-width: 50%;
background-color: rgba(0, 0, 0, 0.1);
border-radius: 2px;
padding: 5px;
}
.red-bag-open-image{
width: 14px;
margin-top: -2px;
}
.red-bag-details{
padding: 10px;
}
.message-time{
padding: 10px;
}
.message-time-details{
text-align: center;
margin: 10px auto;
max-width: 20%;
background-color: rgba(0, 0, 0, 0.1);
border-radius: 2px;
padding: 5px;
color: #ffffff;
}
.audio-time{
display: inline-block;
margin-left: 16px;
color: #7f7f7f;
line-height: 50px;
}
.audio-time-me{
display:inline-block;
float: right;
line-height: 50px;
color: #7f7f7f;
margin-right: 16px;
}
.name-other-person{
margin-left: 56px;
margin-bottom: 2px;
font-size: 12px;
color: #b9b9b9;
}
.ad-box{
padding-top: 20px;
}
.ad{
margin: 20px;
border-top: 1px dashed rgba(0, 0, 0, 0.1);
}
.ad p{
text-align: center;
margin-top: 20px;
margin-bottom: 0px;
color: #080808;
}
.ad a{
text-decoration: none;
}
.transfer{
width: 200px;
background-color: #ffffff;
border-radius: 2px;
display: inline-block;
margin: 0px 10px;
}
.transfer-title{
background-color: #fc9d2b;
border-radius: 2px 2px 0px 0px;
padding: 10px;
}
.add-group{
width: 240px;
min-height: 40px;
background-color: #ffffff;
padding: 10px;
border-radius: 2px;
display: inline-block;
margin: 0px 10px;
}
.add-group-text{
float: left;
width: 180px;
word-wrap:break-word;
}
.add-group-text p{
font-size: 12px;
color: #9c9c9c;
margin: 0;
padding: 0;
display: inline-block;
}
.add-group-img{
float: right;
width: 40px;
display: inline-block;
}
语音播放控制：
//audio left
function PlayAudioLeft(){
var voice = document.getElementById("voice");
var img = document.getElementById("PlayPause");
img.onclick = function(){
if (voice.paused){
voice.play();
} else{
voice.pause();
}
}
voice.addEventListener("play", function (e) {
img.src = "image/voice_left_click.gif";
}, false);
voice.addEventListener("pause", function (e) {
img.src = "image/voice_left.png";
}, false);
}
//audio right
function PlayAudioRight(){
var voiceR = document.getElementById("voiceMe");
var imgR = document.getElementById("PlayPauseMe");
imgR.onclick = function(){
if (voiceR.paused){
voiceR.play();
} else{
voiceR.pause();
}
}
voiceR.addEventListener("play", function (e) {
imgR.src = "image/voice_right_click.gif";
}, false);
voiceR.addEventListener("pause", function (e) {
imgR.src = "image/voice_right.png";
}, false);
}
页面主要使用左右浮动来写的，对方的聊天起泡使用float：left；自己的气泡就用float：right；来实现的。
点击图片放大的时间使用了网上的zoom.js。引入进来之后做了一些调整。感谢zoom.js的发布者。
音频播放的用了一个比较简单的方法。点击图片播放文件，同时js控制点击事件后替换一整gif图片来
实现三条杠动的效果。
