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将多条数据合并成一条

    select  t.col1,t.col2  ,wmsys.wm_concat(t.col3||' ') AS col3 , wmsys.wm_concat(t.col4||'') as col4,w ...

  2. Threads Events QObjects

    Events and the event loop Being an event-driven toolkit, events and event delivery play a central ro ...

  3. csdn第九名

    编号:1025时间:2016年7月18日10:45:21功能:csdn第九名URL :http://blog.csdn.net/augusdi

  4. css中常用的hack

    <!DOCTYPE html> <html> <head> <title>Css Hack</title> <style> #t ...

  5. 一个js对象的代码结构

    初步理解的js里一个对象的写法: GameLayer   GameLayer.js   var GameLayer = cc.Layer.extend({   //私有属性(带下划线"_&q ...

  6. 哎哟，我的.NET呀

    今早无意看到一篇文章,看着.Net被喷得越来越惨,终于还是有人忍不住要奋起反抗了哇! 虽然我已经转了java(大致方向)(没想到我是转的java方向!)好吧!其实也不算是转,就像文章所说的,我最多算是 ...

  7. Apache与Nginx服务器对比

      apache NginX 占用资源和内存 多 轻量级,同样起Web服务,占内存和资源更少   阻塞型 抗并发,异步非阻塞的,高并发下,可保持低资源低消耗低性能   可用的模块超多 可自定义模块,编 ...

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

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

  9. c 函数及指针学习 9

    指针的高级应用 处理命令行参数 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 #include <stdio.h>   int main(int ar ...

  10. leetcode 143. Reorder List ----- java

    Given a singly linked list L: L0→L1→-→Ln-1→Ln,reorder it to: L0→Ln→L1→Ln-1→L2→Ln-2→- You must do thi ...