坐峰怀雪灬

路漫漫其修远兮，吾将上下而求索。
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

jQuery网页右侧固定层显示隐藏在线qq客服代码

Posted on 2016-04-25 17:10  坐峰怀雪灬  阅读(369)  评论(0)  编辑  收藏  举报

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">&nbsp;&nbsp;在线客服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">&nbsp;&nbsp;在线客服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">&nbsp;&nbsp;在线客服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