CSS代码：
1 @charset "utf-8"; 2 *{padding:0;margin:0;} 3 html,body{font-size:12px;font-family:"微软雅黑";outline:none;color:#666;background:#fff;} 4 ul,ol{list-style:none;} 5 img{border:none;outline:none;} 6 a{color:#666;text-decoration:none;outline:none;} 7 a:hover{color:#e8431f;} 8 9 /*浮动客服*/ 10 #floatDivBoxs{width:170px;background:#fff;position:fixed;top:180px;right:0;z-index:999;} 11 #floatDivBoxs .floatDtt{width:100%;height:45px;line-height:45px; background:#f08326;color:#fff;font-size:18px;text-indent:22px;position:relative;} 12 #floatDivBoxs .floatDqq{padding:0 14px;} 13 #floatDivBoxs .floatDqq li{height:45px;line-height:45px;font-size:15px;border-bottom:1px solid #e3e3e3; padding:0 0 0 50px;} 14 #floatDivBoxs .floatDtxt{font-size:18px;color:#333;padding:12px 14px;} 15 #floatDivBoxs .floatDtel{padding:0 0 15px 10px;} 16 #floatDivBoxs .floatDtel img{display:block;} 17 #floatDivBoxs .floatDbg{width:100%;height:20px;background:url(../images/online_botbg.jpg) no-repeat;box-shadow:-2px 0 3px rgba(0,0,0,0.25);} 18 .floatShadow{ background:#fff;box-shadow:-2px 0 3px rgba(0,0,0,0.25);} 19 #rightArrow{width:50px;height:45px;background:url(../images/online_arrow.jpg) no-repeat;position:fixed;top:180px;right:170px;z-index:999;} 20 #rightArrow a{display:block;height:45px;}
JS：
1 <script src="http://code.jquery.com/jquery-2.2.3.min.js"></script>
HTML页面：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>jQuery右侧可隐藏在线QQ客服</title> 6 7 <link href="css/style.css" rel="stylesheet" type="text/css" /> 8 9 <script type="text/javascript" src="http://code.jquery.com/jquery-2.2.3.min.js"></script> 10 11 </head> 12 <body style="height:3000px"> 13 14 <div id="rightArrow"><a href="javascript:;" title="在线客户"></a></div> 15 <div id="floatDivBoxs"> 16 <div class="floatDtt">在线客服</div> 17 <div class="floatShadow"> 18 <ul class="floatDqq"> 19 <li style="padding-left:0px;"><a target="_blank" href="tencent://message/?uin=1234567890&Site=sc.chinaz.com&Menu=yes"><img src="images/qq.png" align="absmiddle"> 在线客服1号</a></li> 20 <li style="padding-left:0px;"><a target="_blank" href="tencent://message/?uin=1234567890&Site=sc.chinaz.com&Menu=yes"><img src="images/qq.png" align="absmiddle"> 在线客服2号</a></li> 21 <li style="padding-left:0px;"><a target="_blank" href="tencent://message/?uin=1234567890&Site=sc.chinaz.com&Menu=yes"><img src="images/qq.png" align="absmiddle"> 在线客服3号</a></li> 22 </ul> 23 <div class="floatDtxt">热线电话</div> 24 <div class="floatDtel"><img src="images/online_phone.jpg" width="155" height="45" alt=""></div> 25 <div style="text-align:center;padding:10PX 0 5px 0;background:#EBEBEB;"><img src="images/wap_ico.jpg"><br>微信公众账号</div> 26 </div> 27 <div class="floatDbg"></div> 28 </div> 29 30 <script type="text/javascript"> 31 var flag=1; 32 $('#rightArrow').click(function(){ 33 if(flag==1){ 34 $("#floatDivBoxs").animate({right: '-175px'},300); 35 $(this).animate({right: '-5px'},300); 36 $(this).css('background-position','-50px 0'); 37 flag=0; 38 }else{ 39 $("#floatDivBoxs").animate({right: '0'},300); 40 $(this).animate({right: '170px'},300); 41 $(this).css('background-position','0px 0'); 42 flag=1; 43 } 44 }); 45 </script> 46 </body> 47 </html>
案例下载：Demo