参考微信网页版写了个聊天页面
先上传图片
好友聊天中的一些样式
群聊样式,增加了用户昵称的显示
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图片来
实现三条杠动的效果。