蓝色大气的在线客服侧边栏

非常简约大气的蓝色在线客服侧边栏，鼠标悬停的时候展开侧边栏在线开发，鼠标离开在自动隐藏，只需要改改里面的字就可以直接拿来用了。

分类：悬浮层/弹出层 > 客服难易：

查看演示下载资源下载积分： 30 积分

首先引入css样式和jquery库。

<link type="text/css" rel="stylesheet" href="css/style.css" media="screen" />
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>

接着写好客服部分的代码：

<!-- 客服部分 -->
<div style="right:-230px;" class="contactusdiyou">
	<div class="hoverbtn">
		<span>联</span><span>系</span><span>我</span><span>们</span>
		<img class="hoverimg" src="images/hoverbtnbg.gif" height="9" width="13">
	</div>
	<div class="conter">
		<div class="con1"> 
			<dl class="fn_cle">
				<dt><img src="images/tel.png" height="31" width="31"></dt>
				<dd class="f1">咨询热线：</dd>
				<dd class="f2"><span class="ph_num">187-9779-0616</span></dd>
			</dl>
		</div> 
		<div class="blank0"></div>
		<div class="qqcall"> 
			<dl class="fn_cle">
				<dt><img src="images/zxkfqq.png" height="31" width="31"></dt>
				<dd class="f1 f_s14">在线客服：</dd>
				<dd class="f2 kefuQQ">
					<span>客服一</span>
					<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&amp;uin=88888888&amp;site=qq&amp;menu=yes"></a><br>
					<span>客服二</span>
					<a target="_blank" href="#"></a>
				</dd>
			</dl>         
		</div> 
		<div class="blank0"></div>
		<div class="weixincall"> 
			<dl class="fn_cle">
				<dt><img src="images/weixin.png" height="31" width="31"></dt>
				<dd class="f1">官方微信站：</dd>
				<dd class="f3"><img src="images/wechat_code.png" height="73" width="73"></dd>
			</dl>
		</div> 
		<div class="blank0"></div>
		<div class="dytimer">
			<span style="font-weight: bold;">公司官网：</span>
			<span><a href="http://www.sucaihuo.com/js/1946.html">www.sucaihuo.com</a></span>
		</div>
	</div>
</div>

最后设置鼠标悬停触发。

$(function() {
	$(".contactusdiyou").hover(function() {
		$(".hoverimg").attr("src","images/hoverbtnbg1.gif");
		$('.diyoumask').fadeIn();
		$('.contactusdiyou').animate({right:'0'},300); 
	}, function() {
		$(".hoverimg").attr("src","images/hoverbtnbg.gif");
		$('.contactusdiyou').animate({right:'-230px'},300,function(){});
		$('.diyoumask').fadeOut();
	});
});