实例参考：

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. 如果将synthesize省略,语义特性声明为assign retain copy时,自己实现setter和getter方法

    如果将synthesize省略,并且我们自己实现setter和getter方法时,系统就不会生成对应的setter和getter方法,还有实例变量 1,当把语义特性声明为assign时,setter和 ...

  2. Struts2 + Spring + Hibernate 通用 Service 和 DAO

    我在 Struts2 + Spring + Hibernate  项目开发中总结出了一个Service 和 DAO ,可以用于处理任何的pojo(bean).使用这两个Service 和 DAO 可以 ...

  3. Hibernate映射文件简单配置

    <?xml version="1.0" ?> <!DOCTYPE hibernate-mapping PUBLIC "-//Hibernate/Hibe ...

  4. 基于EF创建数据库迁移

    通过创建的实体类和DbContext类利用EF的Code First数据库迁移创建数据库. 下面看代码. 一.先创建实体类 我先添加一个BaseEntity,里面就一个属性 [Key] public ...

  5. Android开发日志问题

    以前在Android开发中发现,日志打印好多,调试的时候各种加Log,之后就各种不删除,导致项目后期花大把时间删除日志打印. 学到一个好方法: 在所有尽可能高的父类里面加上一个常量 DEBUG ,一开 ...

  6. WinForm中如何判断关闭事件来源于用户点击右上角的“关闭”按钮

    在C#的WinForm程序中,有的时候需要判定关闭请求从哪里发出来的.比如是用户点击了右上角的“关闭”按钮,还是调用了WinForm.Close()方法.最典型的是要知道点击右上角的“关闭”按钮发出的 ...

  7. IOS设置button 图片 文字 上下、左右

    [btn setImage:imgNor forState:UIControlStateNormal]; [btn setImage:imgSel forState:UIControlStateSel ...

  8. 【21】必须返回对象时，别妄想返回器reference

    1.考虑有理数Rational,有个友元操作符*,返回Rational对象.返回对象,导致临时对象的构造,析构.效率低,因此会想返回方法内局部对象的引用,这种方法不可行.为什么? 2.调用方法是在st ...

  9. C# 网络编程之豆瓣OAuth2.0认证具体解释和遇到的各种问题及解决

            近期在帮人弄一个豆瓣API应用,在豆瓣的OAuth2.0认证过程中遇到了各种问题,同一时候自己须要一个个的尝试与解决,终于完毕了豆瓣API的訪问.作者这里就不再吐槽豆瓣的认证文档了,毕 ...

  10. 访谈将源代码的函数 strcpy/memcpy/atoi/kmp/quicksort

    一.社论 继上一次发表了一片关于參加秋招的学弟学妹们怎样准备找工作的博客之后,反响非常大.顾在此整理一下,以便大家复习.好多源自july的这篇博客,也有非常多是我自己整理的.希望大家可以一遍一遍的写. ...