侧边悬浮在线客服咨询按钮-在线客服按钮代码实现

程序员老狼

于 2021-12-18 17:20:00 发布

阅读量1.3k

点赞数

文章标签： github js css go html5

本文链接：https://blog.csdn.net/taoshihan/article/details/122020137

版权

GOFLY，一套可私有化部署的免费开源客服系统，基于Golang开发，编译后的二进制文件可直接使用无需搭开发环境，下载zip解压即可，仅依赖MySQL数据库，是一个开箱即用的网页在线客服系统，致力于帮助广大开发者/中小站长快速整合私有客服功能

网站只需嵌入一段js或跳转直连地址即可快速接入客服，访客端支持电脑、手机页面自适应，这个项目截止到现在已经更新了一年多时间，github提交了720多次修改，开源版也获取了800多star收藏，您的star就是我的动力，我将继续用心做这个项目◠‿◠。

昨天修改了一下gofly在线客服的悬浮按钮样式，特意把它整理出来进行分享

效果如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.6.8/css/layui.css">
    <script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
</head>
<style>
    .lineBox{
        position: fixed!important;
        bottom: 30%;
        right: 0px;
        left: auto;
        z-index: 999999;
    }
    .lineBox .lineItem{
        cursor: pointer;
        width: 50px;
        height: 55px;
        background: #2d8cf0;
        margin-bottom: 1px;
        color: #fff;
        line-height: 55px;
        text-align: center;
        position: relative;
    }
    .lineItem .layui-icon{
        font-size: 26px;
    }
    .lineItem:hover{
        opacity: 0.8;
    }
    .lineTop{
        margin-top: 4px;
    }
    .lineTip{
        border-radius: 2px;
        box-shadow: 1px 1px 3px rgba(0,0,0,.2);
        position: absolute;
        top:0px;
        right: 59px;
        color: #000;
        padding: 0 10px;
        background: #fff;
        display: none;
    }
    .lineTip:before, .lineTip:after {
        content: "";
        display: block;
        position: absolute;
        width: 0;
        height: 0;
        border: 8px solid transparent;
        border-left-color: rgba(255,255,255,1);
        right: -16px;
        top: 10px;
        z-index: 1;
    }

    .lineTip:after{
        right: -18px;
        border-left-color: rgb(237,237,237);
        z-index: 0;
    }
    .lineWechat{
        width: 100px;
        height: 100px;
        padding: 0px;
    }
</style>
<body>
<div class="lineBox">
    <div class="lineItem">
        <i class="layui-icon">&#xe606;</i>
    </div>
    <div class="lineItem">
        <i class="layui-icon">&#xe677;</i>
        <div class="lineTip lineWechat">
            <img class="lineWechat" src="https://img2020.cnblogs.com/blog/726254/202111/726254-20211103001029429-1411405207.png"/>
        </div>
    </div>
    <div class="lineItem">
        <i class="layui-icon">&#xe676;</i>
        <div class="lineTip">
            QQ:630892807
        </div>
    </div>
    <div class="lineItem">
        <i class="layui-icon">&#xe626;</i>
        <div class="lineTip">
            QQ:630892807
        </div>
    </div>
    <div class="lineItem lineTop" id="launchTopButton">
        <i class="layui-icon">&#xe604;</i>
    </div>
</div>
<script>
    $(function(){
        $("#launchTopButton").click(function() {
            $('body,html').scrollTop(0);
        });
        $(".lineItem").hover(function() {
            $(".lineTip").hide();
            $(this).find(".lineTip").show();
        });
    });
</script>
</body>
</html>