zoukankan      html  css  js  c++  java

  • 参考微信网页版写了个聊天页面

    先上传图片

    好友聊天中的一些样式

    群聊样式，增加了用户昵称的显示

    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- 800px;
    min- 600px;
    height: 100%;
    margin: 0 auto;
    padding: 0;
}

.panel{
    background-color: #2e3238;
    float: left;
    height: 100%;
     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{
     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{
     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;
     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;
     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- 1000px;
    min- 800px;
    height: 100%;
    overflow: auto;
}

.message-header{
     800px;
    min- 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{
     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; 
    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; 
    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- 420px;
    min-height: 40px;
    word-wrap:break-word;
    background-color: #ffffff;
    padding: 5px 8px;
    border-radius: 2px;
    display: inline-block;
}

.bubble-other-audio{
     120px;
    padding: 5px 8px;
    border-radius: 2px;
    display: inline-block;
}

.bubble-other p{
    margin: 0;
    padding: 5px;
}

.bubble-me{
    max- 420px;
    min-height: 40px;
    word-wrap:break-word;
    background-color: #b1e37c;
    padding: 5px 8px;
    border-radius: 2px;
    display: inline-block;
}

.message-img{
     180px;
    border-radius: 2px;
    margin: 0px 10px;
}

.message-video{
     240px;
    border-radius: 2px;
    margin: 0px 10px;
}

.bubble-me p{
    margin: 0;
    padding: 5px;
}

.message-audio{
     32px;
    margin: 4px 20px 4px 40px;
}

.message-audio-right{
     32px;
    margin: 4px 40px 4px 20px;
}

.file{
    max- 280px;
    min-height: 40px;
    background-color: #ffffff;
    padding: 10px;
    border-radius: 2px;
    display: inline-block;
    margin: 0px 10px;
}

.file-images{
    float: left;
     68px;
    display: inline-block;
}

.file-text{
    float: left;
    margin-left: 10px;
}

.file-text h4{
    font-size: 16px;
    margin: 0;
    padding: 0;
    max- 180px;
    word-wrap:break-word;
}

.file-text p{
    font-size: 12px;
    color: #9c9c9c;
    margin-top: 5px;
}

.red-bag{
     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{
     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- 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;
     16px;
}

.red-bag-open{
    text-align: center;
    margin: 10px auto;
    max- 50%;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    padding: 5px;
}

.red-bag-open-image{
     14px;
    margin-top: -2px;
}

.red-bag-details{
    padding: 10px;
}

.message-time{
    padding: 10px;
}

.message-time-details{
    text-align: center;
    margin: 10px auto;
    max- 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{
     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{
     240px;
    min-height: 40px;
    background-color: #ffffff;
    padding: 10px;
    border-radius: 2px;
    display: inline-block;
    margin: 0px 10px;
}

.add-group-text{
    float: left;
     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;
     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图片来

    实现三条杠动的效果。
  • 相关阅读:
    前后端交互实现（nginx,json,以及datatable的问题相关）
    前端工作笔记
    系统前端基本文件+ajax部分理解
    python(day17)二分查找
    python(day16)内置函数，匿名函数
    day15（PYTHON）推导式{生成器，字典，列表，集合}
    Javascript 模拟 new
    Javascript call和apply的模拟实现
    Javascript——bind的模拟实现
    模拟Vue 中数据双向绑定
  • 原文地址：https://www.cnblogs.com/xinjiebi/p/5768193.html
Copyright © 2011-2022 走看看