非常簡約大氣的藍色在線客服側邊欄，鼠標懸停的時候展開側邊欄在線開發(fā)，鼠標離開在自動隱藏，只需要改改里面的字就可以直接拿來用了。

首先引入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="">>聯(lián)</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<>

最后設置鼠標懸停觸發(fā)。

$(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(); }); });