CSS代码：

 @charset "utf-8";

 *{padding:;margin:;}

 html,body{font-size:12px;font-family:"微软雅黑";outline:none;color:#666;background:#fff;}

 ul,ol{list-style:none;}

 img{border:none;outline:none;}

 a{color:#666;text-decoration:none;outline:none;}

 a:hover{color:#e8431f;}

 /*浮动客服*/

 #floatDivBoxs{width:170px;background:#fff;position:fixed;top:180px;right:;z-index:;}

 #floatDivBoxs .floatDtt{width:100%;height:45px;line-height:45px; background:#f08326;color:#fff;font-size:18px;text-indent:22px;position:relative;}

 #floatDivBoxs .floatDqq{padding:0 14px;}

 #floatDivBoxs .floatDqq li{height:45px;line-height:45px;font-size:15px;border-bottom:1px solid #e3e3e3; padding:0 0 0 50px;}

 #floatDivBoxs .floatDtxt{font-size:18px;color:#333;padding:12px 14px;}

 #floatDivBoxs .floatDtel{padding:0 0 15px 10px;}

 #floatDivBoxs .floatDtel img{display:block;}

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

 .floatShadow{ background:#fff;box-shadow:-2px 0 3px rgba(0,0,0,0.25);}

 #rightArrow{width:50px;height:45px;background:url(../images/online_arrow.jpg) no-repeat;position:fixed;top:180px;right:170px;z-index:;}

 #rightArrow a{display:block;height:45px;}

JS：

 <script src="http://code.jquery.com/jquery-2.2.3.min.js"></script>

HTML页面：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>jQuery右侧可隐藏在线QQ客服</title>

 <link href="css/style.css" rel="stylesheet" type="text/css" />

 <script type="text/javascript" src="http://code.jquery.com/jquery-2.2.3.min.js"></script>

 </head>

 <body style="height:3000px">

 <div id="rightArrow"><a href="javascript:;" title="在线客户"></a></div>

 <div id="floatDivBoxs">

     <div class="floatDtt">在线客服</div>

     <div class="floatShadow">

         <ul class="floatDqq">

             <li style="padding-left:0px;"><a target="_blank" href="tencent://message/?uin=1234567890&Site=sc.chinaz.com&Menu=yes"><img src="data:images/qq.png" align="absmiddle">&nbsp;&nbsp;在线客服1号</a></li>

             <li style="padding-left:0px;"><a target="_blank" href="tencent://message/?uin=1234567890&Site=sc.chinaz.com&Menu=yes"><img src="data:images/qq.png" align="absmiddle">&nbsp;&nbsp;在线客服2号</a></li>

             <li style="padding-left:0px;"><a target="_blank" href="tencent://message/?uin=1234567890&Site=sc.chinaz.com&Menu=yes"><img src="data:images/qq.png" align="absmiddle">&nbsp;&nbsp;在线客服3号</a></li>

         </ul>

         <div class="floatDtxt">热线电话</div>

         <div class="floatDtel"><img src="data:images/online_phone.jpg" width="155" height="45" alt=""></div>

         <div style="text-align:center;padding:10PX 0 5px 0;background:#EBEBEB;"><img src="data:images/wap_ico.jpg"><br>微信公众账号</div>

     </div>

     <div class="floatDbg"></div>

 </div>

 <script type="text/javascript">

 var flag=1;

 $('#rightArrow').click(function(){

     if(flag==1){

         $("#floatDivBoxs").animate({right: '-175px'},300);

         $(this).animate({right: '-5px'},300);

         $(this).css('background-position','-50px 0');

         flag=0;

     }else{

         $("#floatDivBoxs").animate({right: '0'},300);

         $(this).animate({right: '170px'},300);

         $(this).css('background-position','0px 0');

         flag=1;

     }

 });

 </script>

 </body>

 </html>

案例下载：Demo

jQuery网页右侧固定层显示隐藏在线qq客服代码的更多相关文章

  1. 在线QQ客服

    代码一: <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=451314789&si ...

  2. 蓝色展开收缩悬浮QQ客服代码

    放在我的博客首页上的的预览图: 在文章区的预览图如下: 代码如下: <div class="scrollsidebar" id="scrollsidebar&quo ...

  3. QQ客服代码，支持临时会话

    <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=QQ号&site=qq&m ...

  4. 网页qq客服代码并自定义图片

    <script>var online= new Array();</script> <script src="http://webpresence.qq.com ...

  5. 在线QQ客服 生成

    很简单,分为个人QQ和企业QQ: 一:企业QQ代码: http://crm2.qq.com/page/portalpage/wpa.php?uin=123456&aty=1&a=0&a ...

  6. qq客服代码

    http://shang.qq.com/v3/widget.html <a target="_blank" href="http://wpa.qq.com/msgr ...

  7. qq客服代码实现过程

    引入css,jsimages,将index.html中的qq聊天代码部分和返回顶部-部分放在head.html文件中, 将文中圈中部分删除,否则影响整个页面的样式:

  8. PC QQ客服代码

    一. <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=QQ号&site=qq&am ...

  9. 基于jquery打造的网页右侧自动收缩浮动在线客服代码

    基于jquery打造的网页右侧自动收缩浮动在线QQ客服代码, 当前比较流行的一款QQ在线jquery特效代码, 代码中还带有IE6下PNG图片透明的特效,如果想研究IE6下PNG透明的同学也可以下载研 ...

随机推荐

  1. oracle数据库什么情况下创建索引比较好

    索引就好象一本字典的目录.凭借字典的目录,我们可以非常迅速的找到我们所需要的条目.数据库也是如此.凭借Oracle数据库的索引,相关语句可以迅速的定位记录的位置,而不必去定位整个表. 虽 然说,在表中 ...

  2. markdown to html

    /************************************************************************* * markdown to html * 说明: ...

  3. Google Analytics SEO 实时 网站 访问量 统计

    /*************************************************************************** * Google Analytics SEO ...

  4. Golang 交叉编译

    各平台的GOOS和GOARCH参考 OS ARCH OS version linux 386 / amd64 / arm >= Linux 2.6 darwin 386 / amd64 OS X ...

  5. 从数学角度看最大期望(EM)算法 I

    [转载请注明出处]http://www.cnblogs.com/mashiqi 2014/11/18 更新.发现以前的公式(2)里有错误,现已改过来.由于这几天和Can讨论了EM算法,回头看我以前写的 ...

  6. （理论篇）53个要点提高PHP编程效率

    用单引号代替双引号来包含字符串,这样做会更快一些.因为php会在双引号包围的字符串中搜寻变量,单引号则不会,注意:只有echo能这么做,它是一种可以把多个字符串当作参数的"函数"( ...

  7. How to adjust OOM score for a process?

    转载自http://www.dbasquare.com/kb/how-to-adjust-oom-score-for-a-process/ How to adjust OOM score for a ...

  8. 图像处理之face morphing

    以前在论坛.微博经常看到一张脸,五官长得像A,脸型似乎又是B,觉得很有意思. 比如像这张图片.这张图片应该是网友用Photoshop完成的,他们取了郭大爷的五官,放在金元帅的脸上,在把边缘处理平滑. ...

  9. MySQL常用配置

    查看MySQL的参数信息 mysql> show variables; 查看key_buffer_size的使用情况 mysql> show status like 'key_read%' ...

  10. 放课后的约定 by：S_H_Y

    题目背景 十年.十年前.天空的蔚蓝,云彩的舒软.我,怎么会认识你.洁白的,洁白的,十年前.我无法忘却.终究是小时候的约定.记忆被困在冻土里,有时我不认识那天的我.难道一切,都锁在心里面了吗? 题目描述 ...