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. Qt4升级到Qt5

    QtWidgets作为一个独立的模块 例如编译时错误 error: QMainWindow: No such file or directory error: QToolButton: No such ...

  2. ubuntu默认root密码

    安装完Kubuntu后一直都是用我的用户名bbking登录, 一直没想到root的问题, 以为每次sudo输入的密码就是我的root密码. 刚才为了修改文件夹的所有者,想使用su root切换到roo ...

  3. hdu 5203

    题目大意: 有n根连续的木棒,其中有m根是坏的,现在要求将木棒切成连续的四段,使得其中三段中都不包含坏的木棒,且三段木棒的长度和最大,在最长的前提下看这三段木棒能否拼成三角形,如果能的话,问最多有多少 ...

  4. 第一部分 python基础

    1.1,参数传递:*代表元组,**代表字典 1.2 ,常用数据类型 列表 [1,2,3] 元组 (1,2,3) 不可变的list 集合 {1,2,3} 字典 {1:a, 2:c} (4)字典以关键字为 ...

  5. ZMMR104-预留单批量删除及恢复

    ************************************************************************ Title : ZMMR104 ** Applicat ...

  6. 六个超大规模Hadoop（前景）

    http://cloud.zol.com.cn/441/4415033_all.html 希望自己可以尽快把Hadoop学好

  7. 计算机中如何表示数字-07IEEE754浮点数标准

    由于不同机器所选用的基数.尾数位长度和阶码位长度不同,因此对浮点数的表示有较大差别,这不利于软件在不同计算机之间的移植.为此,美国IEEE(电器及电子工程师协会)提出了一个从系统角度支持浮点数的表示方 ...

  8. 2016 ACM/ICPC Asia Regional Shenyang Online 1003/HDU 5894 数学/组合数/逆元

    hannnnah_j’s Biological Test Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K ...

  9. 工厂方法模式（FACTORY METHOD）

    核心精神是封装类中不变的部分,提取其中个性化善变的部分为独立类,通过依赖注入以达到解耦.复用和方便后期维护拓展的目的. 工厂方法(Factory Method)模式的意义是定义一个创建产品对象的工厂接 ...

  10. shell下的作业管理[转]

    作业管理 举例来说,我们在登陆 bash 后, 想要一边复制文件.一边进行数据搜寻.一边进行编译,还可以一边进行 vi 程序撰写! 当然我们可以重复登陆那六个文字介面的终端机环境中,不过,能不能在一个 ...