聊天气泡

Posted lightbc

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了聊天气泡相关的知识，希望对你有一定的参考价值。

实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>聊天气泡</title>
        <link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
        <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }

            body {
                background-color: gray;
            }

            #bubble {
                margin-left: 10px;
            }

            #show-container {
                width: 400px;
                height: 400px;
                border: 1px solid lightgray;
                overflow: auto;
            }

            #show-container::-webkit-scrollbar {
                width: 10px;
                height: 10px;
                background-color: lightgray;
            }

            #show-container::-webkit-scrollbar-thumb {
                background-color: darkgray;
            }

            .bubble-type-tag {
                margin-top: 7px;
            }

            #send-info-container {
                position: relative;
                width: 400px;
                height: 150px;
                margin-top: 7px;
                background-color: #fff;
                border: 1px solid lightgray;
            }

            #send-info-container .info-input {
                position: absolute;
                width: 400px;
                border: none;
                display: inline-block;
                resize: none;
                overflow: hidden;
            }

            #send-info-container .send-btn {
                position: absolute;
                right: 0;
                bottom: 0;
                z-index: 9999;
            }

            #show-container ul li {
                margin-top: 50px;
                margin-bottom: 50px;
                text-align: right;
            }

            #show-container ul li .tag-common {
                position: relative;
                max-width: 200px;
                right: 40px;
                padding: 10px 15px;
                background-color: #fff;
                border-radius: 5px;
                text-align: left;
                white-space: pre-wrap;
                display: inline-block;
            }

            #show-container ul li .joyce::before,
            .dakki::before,
            .banas::before {
                position: absolute;
                top: -10px;
                left: -10px;
                content: "";
                width: 20px;
                height: 20px;
            }

            #show-container ul li .joyce::after,
            .dakki::after {
                position: absolute;
                bottom: -10px;
                right: -10px;
                content: "";
                width: 20px;
                height: 20px;
            }

            /**
             * 经典
             */
            #show-container ul li .classic::after {
                position: absolute;
                top: 50%;
                right: -10px;
                content: "";
                width: 0;
                height: 0;
                border-width: 10px;
                border-style: solid;
                border-color: transparent transparent transparent #fff;
                transform: translate(50%, -50%);
            }

            /**
             * 气泡
             */
            #show-container ul li .bubble::before {
                position: absolute;
                top: 120%;
                right: -10px;
                content: "";
                border: 2px solid #fff;
                border-radius: 2px;
            }

            #show-container ul li .bubble::after {
                position: absolute;
                top: 100%;
                right: -4px;
                content: "";
                border: 4px solid #fff;
                border-radius: 4px;
            }

            /**
             * 小乔
             */
            #show-container ul li .joyce {
                background-color: #FD9BA8;
            }

            #show-container ul li .joyce::before {
                background-image: url(images/Joyce.png);
            }

            #show-container ul li .joyce::after {
                background-image: url(images/fan.png);
            }

            /**
             * 妲己
             */
            #show-container ul li .dakki {
                background-color: #FD76AE;
            }

            #show-container ul li .dakki::before {
                background-image: url(images/Dakki.png);
            }

            #show-container ul li .dakki::after {
                background-image: url(images/love.png);
            }

            /**
             * 貂蝉
             */
            #show-container ul li .banas {
                background-color: #5647AC;
            }

            #show-container ul li .banas::before {
                background-image: url(images/Banas.png);
            }

            #show-container ul li .banas::after {
                position: absolute;
                top: 50%;
                left: 50%;
                content: "";
                width: 20px;
                height: 20px;
                transform: translate(-50%, -50%);
                background-image: url(images/Butterfly.png);
            }

            .type-tag-style {
                background-color: lightblue;
            }
        </style>
    </head>
    <body>
        <div id="bubble">
            <!--气泡展示-->
            <div id="show-container">
                <ul></ul>
            </div>
            <!--气泡类型标签-->
            <div class="bubble-type-tag">
                <button type="button" class="layui-btn type-tag-style" name="classic" flag="1">经典</button>
                <button type="button" class="layui-btn" name="bubble" flag="0">气泡</button>
                <button type="button" class="layui-btn" name="joyce" flag="0">小乔</button>
                <button type="button" class="layui-btn" name="dakki" flag="0">妲己</button>
                <button type="button" class="layui-btn" name="banas" flag="0">貂蝉</button>
            </div>
            <!--气泡内容输入-->
            <div id="send-info-container">
                <textarea class="layui-textarea info-input"></textarea>
                <button type="button" class="layui-btn send-btn" id="send">发送</button>
            </div>
        </div>
    </body>
</html>
<script type="text/javascript">
    $(function() {
        var dataID = 0;

        // 气泡类型标签点击事件
        $(".bubble-type-tag button").click(function() {
            $(this).addClass("type-tag-style").attr("flag", "1");
            $(this).siblings().removeClass("type-tag-style").attr("flag", "0");
            $("#show-container ul li div").removeAttr("class");
            $("#show-container ul li div").addClass($(this).attr("name") + " tag-common");
        });

        // 发送消息
        $("#send").click(function() {
            var name = $(".bubble-type-tag button[flag=‘1‘]").attr("name");
            var text = $("#send-info-container textarea").val();
            console.log(text)

            if (text != "" != 0 && name != undefined) {
                var childNode = "<li>" +
                    "<div class = ‘" + name + " tag-common‘></div>" +
                    "</li>";

                $("#show-container ul").append(childNode);
                $("#show-container ul li div:eq(" + dataID + ")").text(text);
                dataID++;
            }
        });
    });
</script>

 

效果

技术图片

以上是关于聊天气泡的主要内容，如果未能解决你的问题，请参考以下文章

iOS绘制聊天气泡

如何在 React JS 中使用聊天气泡制作像 UI 一样的聊天

怎么实现微信聊天时的气泡图

请教仿微信聊天气泡效果 在ios中是怎么实现的

有啥第三方库可以方便的实现iOS的聊天气泡

React Native 中的聊天气泡