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图片来

    实现三条杠动的效果。
  • 相关阅读:
    10. Regular Expression Matching
    9. Palindrome Number （考虑负数的情况）
    8. String to Integer （整数的溢出）
    7. Reverse Integer (整数的溢出）
    LeetCode Minimum Size Subarray Sum
    LeetCode Course Schedule II
    Linux 文件缓存 (一)
    LeetCode Tries Prefix Tree
    Linux : lsof 命令
    LeetCode Binary Tree Right Side View
  • 原文地址：https://www.cnblogs.com/xinjiebi/p/5768193.html
Copyright © 2011-2022 走看看