漂浮QQ客服，兼容bootstrap

官方客服 2016-12-16 16:20:35

<style>
.fix-right{position:fixed;right:10px;bottom:50px;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;transition:all .3s ease-in-out}
.fix-right .tips{-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.2);-moz-box-shadow:0 1px 3px rgba(0,0,0,0.2);box-shadow:0 1px 3px rgba(0,0,0,0.2);border-radius:2px}
.fix-right .tips a{position:relative;display:block;}
.fix-right .tips a span{background:#333;opacity:0;filter:alpha(opacity=0);min-width:79px;width:auto;height:38px;position:absolute;left:-96px;top:0;padding-right:5px;text-align:center;line-height:38px;color:#fff;font-size:12px;-webkit-transition:all ease-in .5s;-o-transition:all ease-in .5s;-moz-transition:all ease-in .5s;-ms-transition:all ease-in .5s;transition:all ease-in .5s;}
.fix-right .tips a span:after,.fix-right .tips a span:before{border: solid transparent;    content: ' ';height: 0;left: 100%;position: absolute;width: 0;}
.fix-right .tips a span:before {border-width: 6px;border-left-color: #333;top: 12px;}
.fix-right .tips a i{font-size:24px;}
.fix-right .tips a span.tel{width:152px;left:-160px;padding-right:5px}
.fix-right .tips a:hover{background:#39ac6a}
.fix-right .tips a:hover span{filter:alpha(opacity=100);left:-79px}
.fix-right .tips a:hover span.tel{left:-150px}
</style>
<div class="fix-right hidden-xs" id="back-top">
    <div class="tips">
        <div class="btn-group-vertical" role="group" aria-label="...">
            {php}
                $qqlist = array('123456','12345123','451345');//手动填写多个
                $qk = 1 ;
                $company_tel = '400-800-800'; //自定义客服电话？，不想用删除
            {/php}
            {loop:$qqlist $v}
            <a href="http://wpa.qq.com/msgrd?v=3&amp;uin={$v}&amp;site=客服{$qk}&amp;menu=yes" target="_blank" class="btn btn-info"><i class="icon-qq"></i><span>客服{$qk}</span></a>
            {php}$qk++;{/php}
            {/loop}
            {if:!empty($company_tel)}
            <a href="javascript:;" class="btn btn-info phone"><i class="icon-phone-hang-up"></i><span class="tel">客服热线 {$company_tel}</span></a>
            {/if}
            <a href="javascript:;" class="btn btn-info phone" id="gotop"><i class="icon-circle-up"></i><span>返回顶部</span></a>
        </div>
    </div>
</div>
<script>
function rightfix() {
    var e = $("#back-top .tips a");
    e.mouseenter(function () {
        $(this).find("span").css({opacity : "1"}),
        $(this).css({overflow : "inherit"})
    }),
    e.mouseleave(function (e) {$(this).find("span").css({opacity : "0"}),
        $(this).css({overflow : "hidden"})
    })
}
$(document).ready(function(){
    rightfix();
    $("#gotop").click(function () {
        $("html , body").animate({scrollTop : 0}, 1e3)
    })
});
</script>

此代码适合于本站所有的原创程序，可将代码复制直接放入模板底部；使用时请修改中间的QQ号码及客服电话！