特效描述：jquery右侧浮动 qq在线客服菜单 鼠标点击展开 qq在线客服菜单，
代码部署教程
1. 引入CSS
<link href="css/online.css" rel="stylesheet" type="text/css" />
2. 引入JS
<script type="text/javascript" src="js/jquery-1.8.3.min.js">
</script>
3. HTML代码
<script type="text/javascript">
function changeOnline(num){
if(isNaN(num) && num == "")
return;
for(var i = 1; i <=5 ; 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');
}
});
$.fn.isChildAndSelfOf = function(b){
return (this.closest(b).length >0);
};
$.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 href="#" class="qq_icon">
企业QQ交谈</a>
</li>
<li>
企业QQ：<a href="#">
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 href="#" class="qq_icon">
企业QQ交谈</a>
</li>
<li>
企业QQ：<a href="#">
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 href="#" class="qq_icon">
企业QQ交谈</a>
</li>
<li>
企业QQ：<a href="#">
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 href="#" class="qq_icon">
企业QQ交谈</a>
</li>
<li>
企业QQ：<a href="#">
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 href="#" class="qq_icon">
企业QQ交谈</a>
</li>
<li>
企业QQ：<a href="#">
123456</a>
</li>
</ul>
</div>
</div>
</div>
<div class="online_w_bottom">
</div>
</div>
</div>
</div>
<div style="height:1200px;">
</div>
