非常簡(jiǎn)約大氣的藍(lán)色在線客服側(cè)邊欄，鼠標(biāo)懸停的時(shí)候展開(kāi)側(cè)邊欄在線開(kāi)發(fā)，鼠標(biāo)離開(kāi)在自動(dòng)隱藏，只需要改改里面的字就可以直接拿來(lái)用了。

首先引入css樣式和jquery庫(kù)。

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

接著寫(xiě)好客服部分的代碼：

 <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;">公司官網(wǎng)：</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<>

最后設(shè)置鼠標(biāo)懸停觸發(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(); }); });