特效介绍
模板网仿美橙互联橙黄色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);"> </a>
<a title id="floatHide" style="display: none;" href="javascript:void(0);"> </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&sid=123456&o=sc.admin5.com&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&sid=123456&o=sc.admin5.com&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&sid=123456&o=sc.admin5.com&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&sid=123456&o=sc.admin5.com&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&sid=123456&o=sc.admin5.com&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&sid=123456&o=sc.admin5.com&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&sid=123456&o=sc.admin5.com&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&sid=123456&o=sc.admin5.com&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&sid=123456&o=sc.admin5.com&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&sid=123456&o=sc.admin5.com&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&Site=http://sc.admin5.com&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&Site=http://sc.admin5.com&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号码