jQuery多个在线QQ客服代码

收藏

本文介绍一款蓝色客服代码，主要功能有多个在线QQ客服、网页咨询、电话显示及新版调查。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

HTML

首先我们放置一个显示的展开按钮和一个隐藏的收起按钮：

<div id="online_qq_tab">
    <a id="floatShow" style="display:block;" href="javascript:void(0);">收缩</a> 
    <a id="floatHide" style="display:none;" href="javascript:void(0);">展开</a>
</div>

接着我们放多个在线QQ客服、网页咨询、电话显示及新版调查。

<div id="onlineService">
    <div class="onlineMenu">
        <h3 class="tQQ">QQ在线客服</h3>
        <ul>
            <li class="tli zixun">在线咨询</li>
            <li><a href="http://www.erdangjiade.com/"><img src="images/pa.gif" width="74" height="22" alt="客服001" /></a></li>
            <li><a href="http://www.erdangjiade.com/"><img src="images/pa.gif" width="74" height="22" alt="客服001" /></a></li>
            <li class="tli fufei">付费学员</li>
            <li class="last"><a href="http://www.erdangjiade.com/"><img src="images/pa.gif" width="74" height="22" alt="客服001" /></a></li>
        </ul>
    </div>
    <div class="wyzx">
        <a href="http://www.erdangjiade.com/"><img src="images/right_float_web.png" width="122" height="50" alt="网页咨询" /></a>
    </div>
    <div class="onlineMenu">
        <h3 class="tele">QQ在线客服</h3>
        <ul>
            <li class="tli phone">4008-517-517</li>
            <li class="last"><a class="newpage" href="http://www.erdangjiade.com/">新版调查</a></li>
        </ul>
    </div>
    <div class="btmbg"></div>
</div>

jQuery

$("#floatShow").click(function() { //展开按钮点击
    $("#onlineService").animate({
        width: "130px",
        opacity: "show"
    },
    "normal",
    function() {
        $("#onlineService").show(); //显示客服区域
    });
    $("#floatShow").hide(); //隐藏展开按钮
    $("#floatHide").show(); //显示收缩按钮
}) $("#floatHide").click(function() { //收缩按钮点击
    $("#onlineService").animate({
        width: "0",
        opacity: "hide"
    },
    "normal",
    function() {
        $("#onlineService").hide(); //隐藏客服区域
    });
    $("#floatShow").show(); //显示展开按钮
    $("#floatHide").hide(); //隐藏收缩按钮
})