jquery悬浮在右侧的在线客服代码

这是一个集合了延时载入滑动展开、可以展开与隐藏、固定在右侧浮动、还具有tab选项卡等多种效果于一身的在线客服代码，在此强烈推荐给大家，要作在线客服的朋友一定不能错过，它的主要特点就是分部门的管理，当你把鼠标移到对应的部门时在左侧展开显示对应的客服内容，里面可以放你想要的任何内容，各部门的切换用的是tab选项卡的效果。

使用说明：

1.引入CSS样式与js文件

<link type="text/css" href="css/jsctrl.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/js.js"></script>

2.在线客服内容

<div id="chat_f1">
	<div id="chat_f1_main">
		<div id="close"></div>
		<a title="点击咨询在线客服" href="#" class="a_kf"></a>
		<a title="点击咨询售后" href="#" class="a_sh"></a>
	</div>
	<div class="chat_f1_expr">
		<div class="list">
			<div class="name">
				<span class="arrow">&bull;</span><a title="客服特效" href="#">客服特效</a>
				<div class="detail">
					<div class="border"></div>
					<div class="mt"><strong>地址：</strong>中国浙江</div>
					<div class="mt"><strong>电话：</strong>010-1499663238</div>
					<div class="mt mt5">
						<a href="#" class="send_sms"></a>&emsp;<a href="#" class="ovl">进入体验馆&raquo;</a>
					</div>
				</div>
			</div>
			
		</div>
		<div class="list">
			<div class="name">
				<span class="arrow">&bull;</span><a title="十里河店" href="#">十里河店</a>
				<div class="detail">
					<div class="border"></div>
					<div class="mt"><strong>地址：</strong>北京市朝阳区十里河街佰汇广场国际精品家居</div>
					<div class="mt"><strong>电话：</strong>010-1499663238</div>
					<div class="mt mt5">
						<a href="#" class="send_sms"></a>&emsp;<a href="#" class="ovl">进入体验馆&raquo;</a>
					</div>
				</div>
			</div>
		</div>
		<div class="list">
			
			<div class="name">
				<span class="arrow">&bull;</span><a title="宁波店" href="#">宁波店</a>
				<div class="detail">
					<div class="border"></div>
					<div class="mt"><strong>地址：</strong>北京市朝阳区朝阳路8号朗廷</div>
					<div class="mt"><strong>电话：</strong>010-1499663238</div>
					<div class="mt mt5">
						<a href="#" class="send_sms"></a>&emsp;<a href="#" class="ovl">进入体验馆&raquo;</a>
					</div>
				</div>
			</div>
		</div>
		<div class="list">
			<div class="name">
				<span class="arrow">&bull;</span><a title="亦庄经济开" href="/beijing/expr.html">亦庄经济开</a>
				<div class="detail">
					<div class="border"></div>
					<div class="mt"><strong>地址：</strong>北京市通州区马驹桥镇新海南里1</div>
					<div class="mt"><strong>电话：</strong>010-1499663238</div>
					<div class="mt mt5">
						<a href="#" class="send_sms"></a>&emsp;<a href="#" class="ovl">进入体验馆&raquo;</a>
					</div>
				</div>
			</div>
		</div>
		<div class="list">
			
			<div class="name">
				<span class="arrow">&bull;</span><a title="海淀区店" href="#">海淀区店</a>
				<div class="detail">
					<div class="border"></div>
					<div class="mt"><strong>地址：</strong>北京市海淀区马连洼北路与圆明园西路交</div>
					<div class="mt"><strong>电话：</strong>010-1499663238</div>
					<div class="mt mt5">
						<a href="#" class="send_sms"></a>&emsp;<a href="#" class="ovl">进入体验馆&raquo;</a>
					</div>
				</div>
			</div>
		</div>
		<div class="list">
			<div class="name">
				<span class="arrow">&bull;</span><a title="丰台区店" href="#">丰台区店</a>
				<div class="detail">
					<div class="border"></div>
					<div class="mt"><strong>地址：</strong>北京市丰台区小屯西路万科中粮假日风景111号院1号楼底商</div>
					<div class="mt"><strong>电话：</strong>1499663238</div>
					<div class="mt mt5">
						<a href="#" class="send_sms"></a>&emsp;<a href="#" class="ovl">进入体验馆&raquo;</a>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div id="chat_f1_bottom"></div>
</div>
<div id="chat_f2" style="display:none;">我要咨询</div>

3.js代码分析

$('.chat_f1_expr').animate({height:'156px'}, 1000 ); 延时载入效果
	$('#close').click(function(){ 关闭在线客服功能
		$('#chat_f1').hide();
		$('#chat_f2').show();
	})
	$('#chat_f2').click(function(){
		$(this).hide();
		$('#chat_f1').show();
	})
	$('.name').hover(function(){  tab选项卡功能效果
		$(this).children('.detail').show();
		$(this).children('.arrow').css('color','#a00');
		},function(){
		$(this).children('.detail').hide();	
		$(this).children('.arrow').css('color','#fff');
	})

现在就可以去浏览看看效果了。

下载更多在线客服代码可以访问jsctrlc特效网的在线客服频道：http://www.jsctrlc.com/zaixiankefu/ 可以免费下载哦。