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. CentOS 6.6 FTP install

    /************************************************************************* * CentOS 6.6 FTP install ...

  2. notebook

    1. 2.

  3. Bandicam视频录制技巧总结+小丸工具箱压缩视频解决视频体积问题

    1.视频录制. 录制质量建议选择100,保证原文件的质量才能更好地保证渲染转码后输出视频的质量.音效这里就一个关键点,就是编码器默认的MPEG-1 L2,会导致会声会影渲染输出出错,程序强行关闭,Ve ...

  4. 转 关于C#中派生类调用基类构造函数的理解

    关于C#中派生类调用基类构造函数的理解 .c#class       本文中的默认构造函数是指在没有编写构造函数的情况下系统默认的无参构造函数 1.  当基类中没有自己编写构造函数时,派生类默认的调用 ...

  5. 自动构建Makefile(1)--C/C++编译流程&Makefile规则简介

      前言: 大家在Windows上使用VS构建C/C++程序时,不需要自己编辑略显晦涩的Makefile文件,而对于初学者而言, 他们甚至没意识到它的存在.VS是自动生成Makefile文件, 并构建 ...

  6. poj1680 最短路判环

    题意:有多个银行可以换钱,每个银行可以将特定的两种钱相互兑换,并且有自己的汇率,现在问是否可以将自己的钱通过银行兑换增加. 其实比较水,主要就是知道最短路问题里的负环可以通过bellman-fold或 ...

  7. JS/JQuery控制图片宽度

    function changeImgWidth(){ for (i = 0; i <$('#info img').length; i++) { var imgWidth=$('#info img ...

  8. kuangbin_ShortPath G (POJ 1502)

    尽管题目很长 写的很玄乎 让我理解了半天 但是事实上就是个模板题啊摔 一发水过不解释 #include <iostream> #include <string> #includ ...

  9. ARM1138@PWM例程分析

    1. Buzzer例程控制原理 由ARM1138原理图可得:Buzzer使用CCP3(对应GPIO-G组0x40026000,4号引脚0x00000010)作为输入引脚: Buzzer例程结构: 涉及 ...

  10. freeswitch 挂断前执行脚本

    通道变量名 api_hangup_hook 介绍在挂断时执行指定API命令 示例 <action application="set" data="api_hangu ...