jquery右侧浮动qq在线客服代码 鼠标点击展开qq在线客服菜单代码

特效描述：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);”>

&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 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>

下载地址

立即下载