侧边悬停在线客服，可以收缩，很实用的。

最新推荐文章于 2024-02-04 14:21:26 发布

samblog

最新推荐文章于 2024-02-04 14:21:26 发布

阅读量1.9k

点赞数 1

本文链接：https://blog.csdn.net/qq_37315182/article/details/74625729

版权

WEB前端同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

HTML

1 篇文章 0 订阅

订阅专栏

CSS

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>右边悬浮窗客服按钮</title>
<meta name="description" content="客服，悬浮客服，右边悬浮在线客服二维码" />
<meta name="keywords" content="客服,悬浮客服,右边悬浮客服" />
</head>

<bod>
<style>
.keifu{ position:fixed; top:10%; right:0;width:150px; _position:absolute; _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.bottom,10)||0)-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
z-index:990;}
.icon_keifu{display: none;}
.icon_keifu .ljzx{font-size:18px;color:#fff;font-family: 'Microsoft Yahei';text-align: center;}

.keifu_con li a b:hover{color:#fff;}
</style>
<div class="keifu" style="float:right;">
<div class="keifu_tab" style="float:right;">
<div class="icon_keifu" style="width:40px;background-color: #E46006;padding:6px 0 6px 0;cursor: pointer;">
<div style="width: 40px;margin-bottom:6px;">
<img style="width:30px;display: block;margin: auto;" src="http://aimg8.dlszyht.net.cn/ueditor/image/732/1463888/1499136067689729.png" />
</div>
<div class="ljzx">立</div>
<div class="ljzx">即</div>
<div class="ljzx">咨</div>
<div class="ljzx">询</div>
</div>
<div class="keifu_box" style="width:160px;border:6px solid #E46006;background-color:#fff;">
<div class="keifu_head" style="overflow: hidden;">
<a href="javascript:void(0)" class="keifu_close" style="width:20px;height:20px;float: right;background-color: #E46006;">
<img src="http://aimg8.dlszyht.net.cn/ueditor/image/732/1463888/1499136065940978.png">
</a>
</div>
<div style="width:100px;height:100px;margin:auto;position: relative;top:-10px;">
<img style="display: block;" src="http://aimg8.dlszyht.net.cn/ueditor/image/732/1463888/1499136066443444.png" />
</div>
<div class="keifu_con" style="list-style: none;padding:0px;margin:0px;margin-bottom: 8px;background-color: #E46006">
<div style="height:30px;border-bottom:1px dashed #ddd;width:130px;margin:auto;padding-top:4px;padding-bottom:6px;width: 160px;">
<a href="#" style="display: block;padding-left: 10px;overflow: hidden;color:#333;">
<img style="float:left;" src="http://aimg8.dlszyht.net.cn/ueditor/image/732/1463888/1499136066922147.png"/>
<b style="font-weight:500;font-family:'Microsoft Yahei';margin-top:6px;font-size:14px;float:left;margin-left:3px;color:#fff;">在线客服咨询</b>
</a>
</div>
<div style="height:30px;border-bottom:1px dashed #ddd;width:130px;margin:auto;padding-top:4px;padding-bottom:6px;width: 160px;">
<a href="#" style="display: block;padding-left: 10px;overflow: hidden;color:#333;">
<img style="float:left;" src="http://aimg8.dlszyht.net.cn/ueditor/image/732/1463888/1499136066922147.png"/>
<b style="font-weight:500;font-family:'Microsoft Yahei';margin-top:6px;float:left;margin-left:3px;font-size:14px;color: #fff;">在线客服咨询</b>
</a>
</div>
</div>
<dl style="padding:0px;margin:0px;">
<dt style="padding:0px;margin:0px;font-size: 14px;margin-left: 6px;">咨询热线</dt>
<dd style="padding:0px;margin:0px;text-align: center;font-size:16px;">400-0000-000</dd>
<dd style="padding:0px;margin:0px;text-align: center;font-size:16px;">400-0000-000</dd>
</dl>
<div class="keifu_bot" style="width:160px;margin-top: 10px;margin-bottom: 10px;">
<img style="width:130px;display: block;margin:auto;" src="https://mp.weixin.qq.com/misc/getqrcode?fakeid=3293519764&token=983169634&style=1" />
<b style="font-weight:500;font-size:14px;display:block;text-align: center;">官方微信公众号</b>
</div>
</div>
</div>
</div>

<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
var KF = $(".keifu");
var wkbox = $(".keifu_box");
var kf_close = $(".keifu .keifu_close");
var icon_keifu = $(".icon_keifu");
var kH = wkbox.height();
var kW = wkbox.width();
var wH = $(window).height();
KF.css({height:kH});
icon_keifu.css("top",parseInt((kH-100)/2));
var KF_top = (wH-kH)/2;
if(KF_top<0) KF_top=0;
KF.css("top",KF_top);
$(kf_close).click(function(){
KF.animate({width:"0"},200,function(){
wkbox.hide();
icon_keifu.show();
KF.animate({width:26},300);
});
});
$(icon_keifu).click(function(){
$(this).hide();
wkbox.show();
KF.animate({width:kW},200);
});
});
</script>
</bod>

</html>

完了！