样式

HTML

<div id="rightArrow"><a href="javascript:;" title="在线客服"></a></div>
<div id="floatDivBoxs">
        <div class="floatDtt">在线客服</div>
    <div class="floatShadow">
        <ul class="floatDqq">
            <li style="padding-left:0px;font-size:13px;"><a target="_blank" href="tencent://message/?uin=44295105&Site=www.czl.net&Menu=yes"><img src="https://cdn.czl.net/online_kefu/img/qq.webp" align="absmiddle">&nbsp;客服一号</a></li>
            <li style="padding-left:0px;font-size:13px;"><a target="_blank" href="tencent://message/?uin=2422877797&Site=www.czl.net&Menu=yes"><img src="https://cdn.czl.net/online_kefu/img/qq.webp" align="absmiddle">&nbsp;客服二号</a></li>
        </ul>
        <div class="floatDtxt">热线电话</div>
        <div class="floatDtel"><img src="https://cdn.czl.net/online_kefu/img/phone.webp" width="155" height="45" alt=""></div>
        <div style="text-align:center;padding:10PX 0 5px 0;background:#EBEBEB;"><img src="https://cdn.czl.net/online_kefu/img/wap_ico.webp" class="wximg"><br>扫码添加微信</div>
    </div>
</div>
<script type="text/javascript" src="https://cdn.czl.net/online_kefu/js/jquery-1.9.1.min.js"></script>
<script>
    var flag=1;
$('#rightArrow').click(function(){
        if(flag==1){
                $("#floatDivBoxs").animate({right: '-130px'},300);
                $(this).animate({right: '-5px'},300);
                $(this).css('background-position','-50px 0');
                flag=0;
        }else{
                $("#floatDivBoxs").animate({right: '0'},300);
                $(this).animate({right: '130px'},300);
                $(this).css('background-position','0px 0');
                flag=1;
        }
});
</script>

CSS

#floatDivBoxs *{padding:0;margin:0;}
#floatDivBoxs ul,ol{list-style:none;}
#floatDivBoxs a{color:#666;text-decoration:none;outline:none;}
#floatDivBoxs a:hover{color:#e8431f;}


#floatDivBoxs{width:130px;height:400px;background:#fff;position:fixed;bottom:50px;right:0;z-index:999;}
#floatDivBoxs .floatDtt{width:130px;height:45px;line-height:45px; background:#037ec6;color:#fff;font-size:18px;text-indent:22px;position:relative;}
#floatDivBoxs .floatDqq{padding:0 14px;width:120px;}
#floatDivBoxs .floatDqq li{height:45px;line-height:45px;font-size:15px;border-bottom:1px solid #e3e3e3; padding:0 0 0 50px;}
#floatDivBoxs .floatDtxt{font-size:18px;color:#333;padding:12px 14px;}
#floatDivBoxs .floatDtel{padding:0 0 15px 10px;}
#floatDivBoxs .floatDtel img{display:block;width:120px;height:40px;}
.floatShadow{ background:#fff;box-shadow:-2px 0 3px rgba(0,0,0,0.25);}
.wximg{width:120px;height:120px;}
#rightArrow{width:45px;height:45px;background:url(https://cdn.czl.net/online_kefu/img/online_arrow.png) no-repeat;position:fixed;bottom:405px;right:130px;z-index:999;}
#rightArrow a{display:block;height:45px;}