侧边悬浮在线客服咨询按钮-在线客服按钮代码实现
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"></i>
</div>
<div class="lineItem">
<i class="layui-icon"></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"></i>
<div class="lineTip">
QQ:630892807
</div>
</div>
<div class="lineItem">
<i class="layui-icon"></i>
<div class="lineTip">
QQ:630892807
</div>
</div>
<div class="lineItem lineTop" id="launchTopButton">
<i class="layui-icon"></i>
</div>
</div>
<script>
$(function(){
$("#launchTopButton").click(function() {
$('body,html').scrollTop(0);
});
$(".lineItem").hover(function() {
$(".lineTip").hide();
$(this).find(".lineTip").show();
});
});
</script>
</body>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2021-12-18 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读