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. C# 对Datatable排序

    一,在C#中要对Datatable排序,可使用DefaultView的Sort方法.先获取Datatable的DefaultView,然后设置 得到的Dataview的sort属性,最后用视图的ToT ...

  2. 完美解决IE6不支持position:fixed的bug

    示例代码: <!DOCTYPE html><html><head><meta http-equiv="Content-Type" cont ...

  3. 面向过程部分 Java 和 C++ 的区别

    前言 Java 和 C++ 在面向过程部分区别并不大,但还是有的,本文罗列了这些区别. 在 Java 中: 1. 数据类型的范围和机器无关 2. 加上前缀 0b 可以表示二进制数,如 0b1001 就 ...

  4. div+css 遮罩层

    CSS样式部分: ---------------------------------- <style type="text/css">#loading-mask{    ...

  5. CSS table-layout 、border-collapse属性

    ( table-layout)设置表格布局算法: 可能的值 值 描述 automatic 默认.列宽度由单元格内容设定. fixed 列宽由表格宽度和列宽度设定. inherit 规定应该从父元素继承 ...

  6. ZOJ 1056 The Worm Turns

    原题链接 题目大意:贪吃蛇的简化版,给出一串操作命令,求蛇的最终状态是死是活. 解法:这条蛇一共20格的长度,所以用一个20个元素的队列表示,队列的每个元素是平面的坐标.每读入一条指令,判断其是否越界 ...

  7. C++ Primer : 第十二章 : 动态内存之动态数组

    动态数组的分配和释放 new和数组 C++语言和标准库提供了一次分配一个对象数组的方法,定义了另一种new表达式语法.我们需要在类型名后跟一对方括号,在其中指明要分配的对象的数目. int* arr ...

  8. Mysql 下 Insert、Update、Delete、Order By、Group By注入

    Insert: 语法:INSERT INTO table_name (列1, 列2,...) VALUES (值1, 值2,....) 报错注入: insert into test(id,name,p ...

  9. Codeforces Round #126 (Div. 2)

    A. Cinema 假设当前要的位置为\((x, y)\),如果枚举答案的横坐标,那么每次找离\(y\)最近的纵坐标. 如果占用了位置\((x,y)\),需要要更新第\(x\)行的信息,而占用位置\( ...

  10. POJ-3107 Godfather

    题目大意:给一棵无根树,找出所有满足下面的条件的点:删除它后,最大子树中的个数最少. 题目分析:两次深搜,第一次找出子树中节点的个数,第二次维护最大子树. ps:边用vector保存时会超时... 代 ...