jQuery实现的网页右下角tab样式在线客服效果代码

jQuery实现的网页右下角tab样式在线客服效果，可以让网站提供在线客服支持，方便用户与客服人员的交流。以下是实现步骤及代码示例：

1. 创建HTML结构

在页面中需要创建以下HTML结构：

<div class="chat-wrapper">
    <div class="chat-header">
        <i class="fa fa-comments" aria-hidden="true"></i>
        <span>客服在线</span>
        <i class="fa fa-angle-down" aria-hidden="true"></i>
    </div>
    <div class="chat-body">
        <div class="chat-message"></div>
        <textarea class="chat-input" placeholder="请输入消息"></textarea>
    </div>
</div>
<div class="chat-tab">在线客服</div>

chat-wrapper 是整个客服窗口的容器，包含头部和主体区域；chat-header 是头部区域，包含图标、标题和收起展开箭头；chat-body 是主体区域，包含消息展示区和输入框；chat-tab 是在线客服的标签，位于页面的右下角。

2. 创建CSS样式

为了让客服窗口和标签看起来更美观，需要为它们创建相应的CSS样式：

.chat-wrapper {
    width: 300px;
    height: 400px;
    border: 1px solid #ccc;
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 999;
    border-radius: 10px 0 0 0;
    overflow: hidden;
    transition: all 0.5s ease;
}

.chat-header {
    background-color: #556b8d;
    color: #fff;
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
    cursor: pointer;
}

.chat-header span {
    margin-left: 10px;
}

.chat-body {
    height: 320px;
    overflow-y: auto;
    padding: 10px;
}

.chat-message {
    margin-bottom: 10px;
}

.chat-input {
    width: 100%;
    height: 80px;
    outline: none;
}

.chat-tab {
    width: 80px;
    height: 30px;
    background-color: #556b8d;
    color: #fff;
    font-size: 14px;
    text-align: center;
    line-height: 30px;
    position: fixed;
    bottom: 20px;
    right: 20px;
    cursor: pointer;
    z-index: 999;
    border-radius: 15px 0 0 0;
}

3. 编写jQuery代码

接下来需要使用jQuery来实现在线客服的交互效果：

$(function () {
    // 将聊天框收缩，只显示标签
    $(".chat-wrapper").hide();
    $(".chat-tab").click(function () {
        $(".chat-wrapper").show();
    });

    // 收起聊天框
    $(".chat-header i.fa-angle-down").click(function () {
        $(".chat-wrapper").animate({
            height: "40px"
        });
        $(".chat-body").hide();
        $(this).hide();
        $(".chat-header i.fa-angle-up").show();
    });

    // 展开聊天框
    $(".chat-header i.fa-angle-up").click(function () {
        $(".chat-wrapper").animate({
            height: "400px"
        });
        $(".chat-body").show();
        $(this).hide();
        $(".chat-header i.fa-angle-down").show();
    });

    // 发送消息
    $(".chat-input").keypress(function (event) {
        if (event.keyCode == 13) {
            var message = $(this).val();
            $(this).val("");
            $(".chat-message").append("<p>我：" + message + "</p>");
        }
    });
});

首先将聊天窗口隐藏，只显示标签；当用户点击标签时，聊天窗口展开。当用户点击收起箭头时，聊天窗口收起，点击展开箭头时，聊天窗口展开。当用户在输入框中按下回车键时，我们会获取输入框内容，显示到聊天框中。

示例

以下是示例代码，在线演示请参考以下链接：

https://codepen.io/hezhengjie/pen/RwejKRj

<!DOCTYPE html>
<html>
<head>
    <title>jQuery实现的网页右下角tab样式在线客服效果</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        .chat-wrapper {
            width: 300px;
            height: 400px;
            border: 1px solid #ccc;
            position: fixed;
            bottom: 0;
            right: 0;
            z-index: 999;
            border-radius: 10px 0 0 0;
            overflow: hidden;
            transition: all 0.5s ease;
        }

        .chat-header {
            background-color: #556b8d;
            color: #fff;
            height: 40px;
            line-height: 40px;
            padding: 0 10px;
            cursor: pointer;
        }

        .chat-header span {
            margin-left: 10px;
        }

        .chat-body {
            height: 320px;
            overflow-y: auto;
            padding: 10px;
        }

        .chat-message {
            margin-bottom: 10px;
        }

        .chat-input {
            width: 100%;
            height: 80px;
            outline: none;
        }

        .chat-tab {
            width: 80px;
            height: 30px;
            background-color: #556b8d;
            color: #fff;
            font-size: 14px;
            text-align: center;
            line-height: 30px;
            position: fixed;
            bottom: 20px;
            right: 20px;
            cursor: pointer;
            z-index: 999;
            border-radius: 15px 0 0 0;
        }
    </style>
</head>
<body>
<div class="chat-wrapper">
    <div class="chat-header">
        <i class="fa fa-comments" aria-hidden="true"></i>
        <span>客服在线</span>
        <i class="fa fa-angle-down" aria-hidden="true"></i>
        <i class="fa fa-angle-up" aria-hidden="true"></i>
    </div>
    <div class="chat-body">
        <div class="chat-message"></div>
        <textarea class="chat-input" placeholder="请输入消息"></textarea>
    </div>
</div>
<div class="chat-tab">在线客服</div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    $(function () {
        // 将聊天框收缩，只显示标签
        $(".chat-wrapper").hide();
        $(".chat-tab").click(function () {
            $(".chat-wrapper").show();
        });

        // 收起聊天框
        $(".chat-header i.fa-angle-down").click(function () {
            $(".chat-wrapper").animate({
                height: "40px"
            });
            $(".chat-body").hide();
            $(this).hide();
            $(".chat-header i.fa-angle-up").show();
        });

        // 展开聊天框
        $(".chat-header i.fa-angle-up").click(function () {
            $(".chat-wrapper").animate({
                height: "400px"
            });
            $(".chat-body").show();
            $(this).hide();
            $(".chat-header i.fa-angle-down").show();
        });

        // 发送消息
        $(".chat-input").keypress(function (event) {
            if (event.keyCode == 13) {
                var message = $(this).val();
                $(this).val("");
                $(".chat-message").append("<p>我：" + message + "</p>");
            }
        });
    });
</script>
</body>
</html>

在网页中引入jQuery和font-awesome样式，即可实现在线客服效果。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery实现的网页右下角tab样式在线客服效果代码 - Python技术站

jQuery实现的网页右下角tab样式在线客服效果代码

1. 创建HTML结构

2. 创建CSS样式

3. 编写jQuery代码

示例

相关文章