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

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

首先引入css样式和jquery库。

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

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

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