Online在线客服功能版块示范脚本

admin

CSS：
.online{ position: fixed; z-index: 1000; right: -140px; top: 50px; background: #fff; padding: 10px; text-align: center; border:1px solid #ccc; border-right:0; border-bottom-left-radius: 10px; border-top-left-radius: 10px;}
.online{ padding-top: 30px;}
.online .tab{ float: left; position: absolute; z-index: 10000; left: -60px; top: 0; width: 60px; height: 156px; content: "";background: url(service.png) no-repeat;cursor: pointer;}
.online a{ display: block;}

JS：
$(".online").append("<div class='tab'></div>");$(".online").hover(function(){$(".online").animate({"right":"0"},"slow")},function(){$(".online").animate({"right":"-140px"},"slow")});
模板：whsilv

admin

.online{ position: fixed; z-index: 1000; right: -100px; top: 50px; background: #fff; padding: 10px; text-align: center; border:1px solid #ccc; border-right:0; border-bottom-left-radius: 10px; border-top-left-radius: 10px;}
.online .Content{ padding-top: 30px; min-height: 150px;}
.online .tab{ float: left; position: absolute; z-index: 10000; left: -60px; top: 0; width: 60px; height: 156px; content: "";background: url(service.png) no-repeat;cursor: pointer;}
.online a{ display: block; margin: 10px 0;}

admin

后台操作办法:
整站布局管理-->高级-->高级自定义脚本，在编辑器里选择第一个按纽HTML代码，录入以下内容，可根据自己的需要修改

<div class="qq">
<span> <a href="http://sighttp.qq.com/msgrd?v=1&uin=20xxx54" target="_blank"><img border="0" src="http://wpa.qq.com/pa?p=1:xxx554:7" alt="点击这里给我发消息" /></a> <a href="http://sighttp.qq.com/msgrd?v=1&uin=29xx66" target="_blank"><img border="0" src="http://wpa.qq.com/pa?p=1:2xxx866:7" alt="点击这里给我发消息" /></a> </span>
</div>
<div class="tel">
<span> 0553-66191xxx<br />
0553-655xxx5<br />
138xxxx0512<br />
1665xxx1122 </span>
</div>
<div class="istop">
</div>

CSS：
.online{ position: fixed; z-index: 10000; right:0; top: 350px;}
.online .Content{ display: flex; flex-flow: column nowrap;}
.online div{ display: flex; flex-flow: row nowrap; justify-content: right; position: relative;}
.online div::before{ display:flex; width:50px; height: 50px; font-family: fontawesome; font-size: 30px; align-items: center; justify-content: center; background: #c00; color: #fff; margin:1px;}
.online .qq::before{content: '\f1d6';}
.online .tel::before{content: '\f095';}
.online .istop::before{content: '\f077';}
.online div span{ display:none; position: absolute; background: #fff; right:60px; text-align: left; border:1px solid #ccc; border-left:5px solid #c00; padding:10px; white-space: nowrap;}
.online div span::after{ float: left; position: absolute; right:-6px; top: 15px; width:10px; height:10px; content:""; transform:rotate(45deg); background: #fff; border-top:1px solid #ccc; border-right: 1px solid #ccc;}
.online div span a{ display: block; margin: 10px 0;}


JS：
$(function(){
$(".online .Content div").hover(function(){$("span",this).fadeToggle(1000)},function(){$("span",this).fadeToggle(100)})
$(".online .istop").click(function(){$("html").animate({scrollTop:0},1000);});
})

admin

HTML：
<div class="online">
    <div class="hide"></div>
    <div class="contactus">
        <div id="Telephonist">
            $func_contact(show=qq|tel|mail|wx|qrcode,cln=0)$</div>
    </div>
    <div class="top"></div>
</div>

CSS：
.online {
    display: none;
}

@include media-breakpoint-up(sm) {
    .online {
        display: flex;
        flex-flow: column wrap;
        position: fixed;
        right: 0;
        top: 200px;
        z-index: 1000;
        animation: sliderIn;
        animation-duration: 2s;
        opacity: .5;

        &:hover {
            opacity: 1;
        }

        .dt {
            display: none;
        }

        div,
        .Margin>div {
            display: flex;
            flex-flow: column wrap !important;
            justify-content: flex-start;
            align-items: center;
            padding: 0 !important;
            cursor: pointer;
            position: relative;

            &::before {
                display: inline-flex;
                justify-content: center;
                align-items: center;
                width: 50px !important;
                height: 50px;
                background: $fst;
                color: #fff !important;
                margin-right: 0 !important;
                font-size: 2rem !important;
                border-top: 1px solid white;
            }
        }

        .Margin>div {

            .dd {
                display: none;
                position: absolute;
                right: 52px;
                z-index: 1000;
                white-space: nowrap;
                background: $fst;
                min-height: 50px;
                padding: 15px;
                color: #fff;
                font-size: 15px;

                a {
                    color: white !important;
                    font-size: 15px;

                    c {
                        color: white;
                    }

                    &:hover {
                        color: #ff0;
                    }

                    img {
                        width: 150px;
                    }
                }
            }

            &:hover {
                .dd {
                    display: flex;
                    flex-direction: column;
                    text-align: left;
                }
            }
        }

        .hide {
            background: #ff0;

            &:before {
                content: '\f054';
                color: #fff;
            }
        }

        .top:before {
            content: '\f077';
            color: #fff;
        }
    }
}


@keyframes sliderIn {
    from {
        top: 0;
        opacity: 1;
    }

    to {
        top: 200px;
        opacity: .5;
    }
}


JS:
$(function () {
    var dir = "";
    var qs = "";
    $(function () {
        $(".phone .wechat").hover(function () { $(this).attr("title", $(this).find(".dt").html()); $(this).find(".dd").slideDown(); }, function () { $(this).find(".dd").slideUp(); })
        $(".phone .qrcode").hover(function () { $(this).attr("title", $(this).find(".dt").html()); $(this).find(".dd").slideDown(); }, function () { $(this).find(".dd").slideUp(); })
        $(".phone .xcx").hover(function () { $(this).attr("title", $(this).find(".dt").html()); $(this).find(".dd").slideDown(); }, function () { $(this).find(".dd").slideUp(); })
        $(".phone .app").hover(function () { $(this).attr("title", $(this).find(".dt").html()); $(this).find(".dd").slideDown(); }, function () { $(this).find(".dd").slideUp(); })
        $(".online .top").click(function () { $("html").animate({ scrollTop: 0 }, 1000); });
        var i = 0;
        if ($(window).width() <= 658) i = 1;
        $(".online").on("click", ".hide", function () {
            i += 1;
            if (i % 2 == 1) {
                $(".online .hide").animate({ width: 60 }, 500);
                $(".online").animate({ right: -50 }, 500);
            } else {
                $(".online .hide").animate({ width: 50 }, 500)
                $(".online").animate({ right: 0 }, 500);
            }
        })
        $(".online div").hover(function () {
            $(this).find("dd").animate({ width: "toggle" }, 300)
        })
        $(".navbar-toggler").click(function () { $(".menu").slideToggle("slow"); });
        if ($("pager").length > 0) {
            $("pager a").click(function () {
                if ($(this).attr("page") < $("cur").attr("rel")) { dir = "prev"; }
                $.send("", $.extend({ dir: dir, page: $(this).attr("page") }, qs))
            })
            $("input[name=skip]").click(function () {
                if ($("input[name=jump]").val() < $("cur").attr("rel")) { dir = "prev"; }
                if ($("input[name=jump]").val() == $("cur").attr("rel")) { dir = $(this).attr("dir"); }
                $.send("", $.extend({ dir: dir, page: $("input[name=jump]").val() }, qs));
            })
        }
    })
})
模板：yongyu,whww,feichi