最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

jQuery多个在线QQ客服代码

来源:http://www.erdangjiade.com/ 沐浴春风 2015-05-12 08:46浏览(1778)

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

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

jQuery多个在线QQ客服代码
分类:其它特效 > 在线客服 难易:初级
查看演示 下载资源 下载积分: 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(); //隐藏收缩按钮 
})
标签: 客服qq
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/115.html
评论0
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

1 2