模板网仿美橙互联QQ在线客服jQuery代码

        模板网仿美橙互联橙黄色QQ在线客服jQuery代码，带在线时间，QQ分类列表，点击弹出，再点击除QQ面板外的任何地方收回。
1、在head区域引入下面的js文件：

<script src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="js/jquery.KinSlideshow-1.2.1.min.js" type="text/javascript"></script>

2、把以下代码拷贝到您的html页面:

<link href="css/online.css" rel="stylesheet" type="text/css" />
<script>
function changeOnline(num) {
    if (isNaN(num) && num == "")
        return;
    for (var i = 1; i <=6 ; i++)
    {
        if (i == num)
        {
            document.getElementById("onlineSort" + i).className = "online_bar expand";
            document.getElementById("onlineType" + i).style.display = "block";
        }
        else
        {
            document.getElementById("onlineSort" + i).className = "online_bar collapse";
            document.getElementById("onlineType" + i).style.display = "none";
        }
    }
}

$(document).ready(function(){
  $("#floatShow").bind("click",function(){
    $('#onlineService').animate({width: 'show', opacity: 'show'}, 'normal',function(){ $('#onlineService').show(); });$('#floatShow').attr('style','display:none');$('#floatHide').attr('style','display:block');
    return false;
  });
  $("#floatHide").bind("click",function(){
    $('#onlineService').animate({width: 'hide', opacity: 'hide'}, 'normal',function(){ $('#onlineService').hide(); });$('#floatShow').attr('style','display:block');$('#floatHide').attr('style','display:none');
  });
  $(document).bind("click",function(event){
    if ($(event.target).isChildOf("#online_qq_layer") == false)
    {
     $('#onlineService').animate({width: 'hide', opacity: 'hide'}, 'normal',function(){ $('#onlineService').hide(); });$('#floatShow').attr('style','display:block');$('#floatHide').attr('style','display:none');
    }
  });
jQuery.fn.isChildAndSelfOf = function(b){
    return (this.closest(b).length > 0);
};
jQuery.fn.isChildOf = function(b){
    return (this.parents(b).length > 0);
};
});
</script>
<div id="online_qq_layer">
    <div id="online_qq_tab">
        <div class="online_icon">
            <a title id="floatShow" style="display: block;" href="javascript:void(0);">&nbsp;</a>
            <a title id="floatHide" style="display: none;" href="javascript:void(0);">&nbsp;</a>
        </div>
    </div>
    <div id="onlineService">
        <div class="online_windows overz">
            <div class="online_w_top">
            </div>
            <div class="online_w_c overz">
                <div class="online_bar expand" id="onlineSort1">
                    <h2><a onclick="changeOnline(1)">域名/虚拟主机</a></h2>
                    <div class="online_content overz" id="onlineType1">
                        <ul class="overz">
                            <li>
                            <a onclick="javascript:window.open('http://b.qq.com/webc.htm?new=0&amp;sid=123456&amp;o=sc.admin5.com&amp;q=7', '_blank', 'height=544, width=644,toolbar=no,scrollbars=no,menubar=no,status=no');" class="qq_icon">
                            企业QQ交谈</a></li>
                            <li>企业QQ：
                            <a onclick="javascript:window.open('http://b.qq.com/webc.htm?new=0&amp;sid=123456&amp;o=sc.admin5.com&amp;q=7', '_blank', 'height=544, width=644,toolbar=no,scrollbars=no,menubar=no,status=no');">
                            123456</a></li>
                        </ul>
                    </div>
                </div>
                <div class="online_bar collapse" id="onlineSort2">
                    <h2><a onclick="changeOnline(2)">企业邮局</a></h2>
                    <div class="online_content overz" id="onlineType2">
                        <ul class="overz">
                            <li>
                            <a onclick="javascript:window.open('http://b.qq.com/webc.htm?new=0&amp;sid=123456&amp;o=sc.admin5.com&amp;q=7', '_blank', 'height=544, width=644,toolbar=no,scrollbars=no,menubar=no,status=no');" class="qq_icon">
                            企业QQ交谈</a></li>
                            <li>企业QQ：
                            <a onclick="javascript:window.open('http://b.qq.com/webc.htm?new=0&amp;sid=123456&amp;o=sc.admin5.com&amp;q=7', '_blank', 'height=544, width=644,toolbar=no,scrollbars=no,menubar=no,status=no');">
                            123456</a></li>
                        </ul>
                    </div>
                </div>
                <div class="online_bar collapse" id="onlineSort3">
                    <h2><a onclick="changeOnline(3)">建站之星/网店</a></h2>
                    <div class="online_content overz" id="onlineType3">
                        <ul class="overz">
                            <li>
                            <a onclick="javascript:window.open('http://b.qq.com/webc.htm?new=0&amp;sid=123456&amp;o=sc.admin5.com&amp;q=7', '_blank', 'height=544, width=644,toolbar=no,scrollbars=no,menubar=no,status=no');" class="qq_icon">
                            企业QQ交谈</a></li>
                            <li>企业QQ：
                            <a onclick="javascript:window.open('http://b.qq.com/webc.htm?new=0&amp;sid=123456&amp;o=sc.admin5.com&amp;q=7', '_blank', 'height=544, width=644,toolbar=no,scrollbars=no,menubar=no,status=no');">
                            123456</a></li>
                        </ul>
                    </div>
                </div>
                <div class="online_bar collapse" id="onlineSort4">
                    <h2><a onclick="changeOnline(4)">代理咨询</a></h2>
                    <div class="online_content overz" id="onlineType4">
                        <ul class="overz">
                            <li>
                            <a onclick="javascript:window.open('http://b.qq.com/webc.htm?new=0&amp;sid=123456&amp;o=sc.admin5.com&amp;q=7', '_blank', 'height=544, width=644,toolbar=no,scrollbars=no,menubar=no,status=no');" class="qq_icon">
                            企业QQ交谈</a></li>
                            <li>企业QQ：
                            <a onclick="javascript:window.open('http://b.qq.com/webc.htm?new=0&amp;sid=123456&amp;o=sc.admin5.com&amp;q=7', '_blank', 'height=544, width=644,toolbar=no,scrollbars=no,menubar=no,status=no');">
                            123456</a></li>
                        </ul>
                    </div>
                </div>
                <div class="online_bar collapse" id="onlineSort5">
                    <h2><a onclick="changeOnline(5)">网站推广</a></h2>
                    <div class="online_content overz" id="onlineType5">
                        <ul class="overz">
                            <li>
                            <a onclick="javascript:window.open('http://b.qq.com/webc.htm?new=0&amp;sid=123456&amp;o=sc.admin5.com&amp;q=7', '_blank', 'height=544, width=644,toolbar=no,scrollbars=no,menubar=no,status=no');" class="qq_icon">
                            企业QQ交谈</a></li>
                            <li>企业QQ：
                            <a onclick="javascript:window.open('http://b.qq.com/webc.htm?new=0&amp;sid=123456&amp;o=sc.admin5.com&amp;q=7', '_blank', 'height=544, width=644,toolbar=no,scrollbars=no,menubar=no,status=no');">
                            123456</a></li>
                        </ul>
                    </div>
                </div>
                <div class="online_bar collapse" id="onlineSort6">
                    <h2><a onclick="changeOnline(6)">橙云主机(IDC)</a></h2>
                    <div class="online_content overz" id="onlineType6">
                        <ul class="overz">
                            <li>
                            <a class="qqlink" href="javascript:void(0);" onclick="javascript:window.open('tencent://message/?uin=123456&amp;Site=http://sc.admin5.com&amp;Menu=yes;', '_blank', 'height=544, width=644,toolbar=no,scrollbars=no,menubar=no,status=no');">
                            <img src="../../images/qqs_1.gif" border="0">123456</a></li>
                        </ul>
                        <ul class="overz">
                            <li>
                            <a class="qqlink" href="javascript:void(0);" onclick="javascript:window.open('tencent://message/?uin=123456&amp;Site=http://sc.admin5.com&amp;Menu=yes;', '_blank', 'height=544, width=644,toolbar=no,scrollbars=no,menubar=no,status=no');">
                            <img src="../../images/qqs_1.gif" border="0">123456</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="online_w_bottom">
            </div>
        </div>
    </div>
</div>

3、更改代码里面的“123456”为您的QQ号码


部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！