今天介紹一款客服代碼，主要功能有微信、QQ、電話顯示及返回頂部功能。

首先我們在#service放置微信、QQ、電話及返回頂部四個按鈕。

<div< span=""> id="service"> <ul< span="">> <li< span="">> <a< span=""> href="javascript:void(0)" class="weixin_area"> <img< span=""> src="images/l02.png" width="47" height="49" class="shows" /> <img< span=""> src="images/a.png" width="57" height="49" class="hides" /> <img< span=""> src="images/weixin.jpg" width="145" class="weixin" style="display:none;margin:-100px 57px 0 0" />   <li< span="">> <a< span=""> href="http://wpa.qq.com/msgrd?v=3&uin=800022936&site=qq&menu=yes" target="_blank"> <div< span=""> class="hides" style="width:161px;display:none;" id="qq"> <div< span=""> class="hides" id="p1"> <img< span=""> src="images/ll04.png">  <div< span=""> class="hides" id="p2"><span< span=""> style="color:#FFF;font-size:13px">800022936</span<>   <img< span=""> src="images/l04.png" width="47" height="49" class="shows" />   <li< span=""> id="tel"> <a< span=""> href="javascript:void(0)"> <div< span=""> class="hides" style="width:161px;display:none;" id="tels"> <div< span=""> class="hides" id="p1"> <img< span=""> src="images/ll05.png">  <div< span=""> class="hides" id="p3"><span< span=""> style="color:#FFF;font-size:12px">0551-65371998</span<>   <img< span=""> src="images/l05.png" width="47" height="49" class="shows" />   <li< span=""> id="btn"> <a< span=""> id="top_btn"> <div< span=""> class="hides" style="width:161px;display:none"> <img< span=""> src="images/ll06.png" width="161" height="49" />  <img< span=""> src="images/l06.png" width="47" height="49" class="shows" />    </img<></img<></div<></a<></li<></img<></div<></img<></div<></div<></a<></li<></img<></div<></img<></div<></div<></a<></li<></img<></img<></img<></a<></li<></ul<></div<>

jQuery

鼠標(biāo)懸浮各個按鈕及離開代碼：

$("#service a").hover(function() { if ($(this).prop("className") == "weixin_area") { $(this).children("img.hides").show(); } else { $(this).children("div.hides").show(); 
        $(this).children("img.shows").hide(); 
        $(this).children("div.hides").animate({ marginRight: '0px' }, '0'); } }, function() { if ($(this).prop("className") == "weixin_area") { $(this).children("img.hides").hide(); } else { $(this).children("div.hides").animate({ marginRight: '-163px' }, 0, function() { $(this).hide(); 
            $(this).next("img.shows").show(); }); } });

返回頂部代碼：

$("#top_btn").click(function() { $("html,body").animate({scrollTop: 0}, 600); });

鼠標(biāo)懸浮微信上方和離開代碼：

$(".weixin_area").hover(function() { $(this).children(".weixin").show(); },function(){ $(this).children(".weixin").hide(); })