简洁右侧栏客服代码

今天介绍一款客服代码，主要功能有微信、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

鼠标悬浮各个按钮及离开代码：

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

鼠标悬浮微信上方和离开代码：

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