实例参考：

http://sc.chinaz.com/tag_jiaoben/zaixiankefu.html

代码：

css

 @charset "utf-8";

 *{margin:;padding:;list-style-type:none;}  //所有左上角开始坐标

 a,img{border:;}

 body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}  //全部字体

 /* side */ //侧边栏
 .side{position:fixed;width:54px;height:275px;right:;top:214px;z-index:;}

 .side ul li{width:54px;height:54px;float:left;position:relative;border-bottom:1px solid #444;}

 .side ul li .sidebox{position:absolute;width:54px;height:54px;top:;right:;transition:all 0.3s;background:#000;opacity:0.8;filter:Alpha(opacity=80);color:#fff;font:14px/54px "微软雅黑";overflow:hidden;}

 .side ul li .sidetop{width:54px;height:54px;line-height:54px;display:inline-block;background:#000;opacity:0.8;filter:Alpha(opacity=80);transition:all 0.3s;}

 .side ul li .sidetop:hover{background:#ae1c1c;opacity:;filter:Alpha(opacity=100);}

 .side ul li img{float:left;}

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>侧边栏在线客服</title>

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

 <script src="js/jquery-2.0.3.min.js" type="text/javascript"></script>    //js引入

 <script type="text/javascript">

 $(document).ready(function(){
　　　　//鼠标移动上去事件

     $(".side ul li").hover(function(){

         $(this).find(".sidebox").stop().animate({"width":"124px"},200).css({"opacity":"1","filter":"Alpha(opacity=100)","background":"#ae1c1c"})

     },function(){

         $(this).find(".sidebox").stop().animate({"width":"54px"},200).css({"opacity":"0.8","filter":"Alpha(opacity=80)","background":"#000"})

     });

 });

 //回到顶部

 function goTop(){

     $('html,body').animate({'scrollTop':},);

 }

 </script>

 </head>

 <body>

 <div style="height:1000px;"></div>

 <div class="side">

     <ul>

         <li><a href="#"><div class="sidebox"><img src="img/side_icon01.png">客服中心</div></a></li>

         <li><a href="#"><div class="sidebox"><img src="img/side_icon02.png">客户案例</div></a></li>

         <li><a href="javascript:void(0);" ><div class="sidebox"><img src="img/side_icon04.png">QQ客服</div></a></li>

         <li><a href="javascript:void(0);" ><div class="sidebox"><img src="img/side_icon03.png">新浪微博</div></a></li>

         <li style="border:none;"><a href="javascript:goTop();" class="sidetop"><img src="img/side_icon05.png"></a></li>

     </ul>

 </div>

 <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">

 <p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>

 </div>

 </body>

 </html>

效果:

代码资源下载:

http://sc.chinaz.com/jiaoben/141105047690.htm

【html】【14】特效篇--侧边栏客服的更多相关文章

  1. mouseenter 事件，固定右侧客服特效

    不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件. 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件. 当鼠标指针离开元素时,会发生 mouseleave 事件 ...

  2. jQuery返回顶部和在线客服网站侧边栏

    效果图: 全部代码: <!DOCTYPE html> <html> <head> <title></title> <style typ ...

  3. 鸿蒙内核源码分析(内存汇编篇) | 谁是虚拟内存实现的基础 | 百篇博客分析OpenHarmony源码 | v14.14

    百篇博客系列篇.本篇为: v14.xx 鸿蒙内核源码分析(内存汇编篇) | 谁是虚拟内存实现的基础 | 51.c.h .o 内存管理相关篇为: v11.xx 鸿蒙内核源码分析(内存分配篇) | 内存有 ...

  4. 用SignalR 2.0开发客服系统[系列1:实现群发通讯]

    前言 交流群:195866844 先说一下我为什么会写这个博客吧,(首先说一下,我是一个小菜鸟,讲的不好请指导 - -,)  前段时间公司的项目涉及到在B/S上使用即时通讯,(其实就是做一个B/S的客 ...

  5. 用SignalR 2.0开发客服系统[系列2:实现聊天室]

    前言 交流群:195866844 上周发表了 用SignalR 2.0开发客服系统[系列1:实现群发通讯] 这篇文章,得到了很多帮助和鼓励,小弟在此真心的感谢大家的支持.. 这周继续系列2,实现聊天室 ...

  6. 用SignalR 2.0开发客服系统[系列4:负载均衡的情况下使用SignalR]

    前言 交流群:195866844 目录: 用SignalR 2.0开发客服系统[系列1:实现群发通讯] 用SignalR 2.0开发客服系统[系列2:实现聊天室] 用SignalR 2.0开发客服系统 ...

  7. C#开发微信门户及应用(7)-微信多客服功能及开发集成

    最近一直在弄微信的集成功能开发,发现微信给认证账户开通了一个多客服的功能,对于客户的咨询,可以切换至客服处理的方式,而且可以添加多个客服进行处理,这个在客户咨询比较多的时候,是一个不错的营销功能.微信 ...

  8. 使用 WPF+ ASP.NET MVC 开发 在线客服系统 （一）

    近段时间利用业余时间开发了一套在线客服系统,期间遇到过大大小小不少问题,好在都一一解决,最终效果也还可以,打算写一个系列的文章把开发过程详细的记录下来. 希望能够和更多的开发人员互相交流学习,也希望有 ...

  9. 第一篇博客：Hello World

    2016年10月10日,双十,好日子,决定开始写第一篇博客,标题想了会,就叫Hello World 吧,哈哈^_^. 首先感谢博客园的管理们能批准我的申请,记得在14年的时候申请过一次,竟然没申请通过 ...

随机推荐

  1. 微软.NET各子技术领域的应用前景

    从2002年微软发布.NET 1.0,其间历经了8年的发展,再到.NET 4.0,其已经成为一个庞大而复杂的软件开发与运行平台,架构日益复杂,应用领域也在不断地扩展,包容了“一堆”的子技术领域. 在. ...

  2. java基础三种循环的使用及区别

    摘要:Java新人初学时自己的一些理解,大神们路过勿喷,有什么说的不对不足的地方希望能给予指点指点,如果觉得可以的话,希望可以点一个赞,嘿嘿,在这里先谢了.在这里我主要说的是初学时用到的Java三个循 ...

  3. Why Does Everyone Else Appear to Be Succeeding?

    Why Does Everyone Else Appear to Be Succeeding?  —Steven G. Krantz When you are a student, it will a ...

  4. C++ 外部调用private方法

    1.思考,对于C++,能不能在外部调用私有方法? 2.在Java中,子类继承不能缩小父类成员的访问权限.因为在Java中,继承只是表示Is-A关系,因此,父类提供的接口,子类必须承诺仍然提供,不能缩小 ...

  5. C#/Access-数据库获取自动编号的最大值

    //conStrSQL你改成你的access,我这里用的SQL2005string conStrSQL = "Data Source=xx.xx.xx.xx;Initial Catalog= ...

  6. Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 44 bytes) in

    最近莫名出现这个错误. 研究一下原因很奇葩呢. 原因:sql获取数据库中数据,取出数据赋给变量,数据太多,超过memory_limit内存设置了. 解决方法:设置memory_limit不建议.优化代 ...

  7. 模板 树链剖分BFS版本

    //点和线段树都从1开始 //边使用vector vector<int> G[maxn]; ],num[maxn],iii[maxn],b[maxn],a[maxn],top[maxn], ...

  8. 笔记本禁用自带键盘攻略-------针对shift默认按下的解决方案

    长期以来楼主一直被一个问题困扰,就是win8进入界面,输密码时开大写其实是小写,开小写是大写.进入系统以后shift键是默认按下的.一直以为是电脑中毒了.上网查了一些东西,发现可能是因为键盘硬件方面的 ...

  9. python无私有成员变量

    python解释器将__init__函数里的__z变量转成 _classname__z了,明确规则后外部依旧能够通过实力对象来訪问. In [1]: class aa: ...: def __init ...

  10. springMVC学习笔记二

    六.springmvc的注解 xml的配置→注解 1.新建一个配置文件还是在config下 新建springAnnotation-servlet.xml web.xml 修改初始化为<param ...