实例参考：

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

代码：

css

  1.  @charset "utf-8";
  2.  *{margin:;padding:;list-style-type:none;}  //所有左上角开始坐标
  3.  a,img{border:;}
  4.  body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}  //全部字体
  5.  /* side */ //侧边栏
     .side{position:fixed;width:54px;height:275px;right:;top:214px;z-index:;}
  6.  .side ul li{width:54px;height:54px;float:left;position:relative;border-bottom:1px solid #444;}
  7.  .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;}
  8.  .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;}
  9.  .side ul li .sidetop:hover{background:#ae1c1c;opacity:;filter:Alpha(opacity=100);}
  10.  .side ul li img{float:left;}

html

  1.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  <html xmlns="http://www.w3.org/1999/xhtml">
  3.  <head>
  4.  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.  <title>侧边栏在线客服</title>
  6.  <link rel="stylesheet" href="css/style.css" type="text/css" />　　　　　　//css引入
  7.  <script src="js/jquery-2.0.3.min.js" type="text/javascript"></script>    //js引入
  8.  <script type="text/javascript">
  9.  $(document).ready(function(){
    　　　　//鼠标移动上去事件
  10.      $(".side ul li").hover(function(){
  11.          $(this).find(".sidebox").stop().animate({"width":"124px"},200).css({"opacity":"1","filter":"Alpha(opacity=100)","background":"#ae1c1c"})
  12.      },function(){
  13.          $(this).find(".sidebox").stop().animate({"width":"54px"},200).css({"opacity":"0.8","filter":"Alpha(opacity=80)","background":"#000"})
  14.      });
  15.  
  16.  });
  17.  //回到顶部
  18.  function goTop(){
  19.      $('html,body').animate({'scrollTop':},);
  20.  }
  21.  </script>
  22.  </head>
  23.  <body>
  24.  <div style="height:1000px;"></div>
  25.  <div class="side">
  26.      <ul>
  27.          <li><a href="#"><div class="sidebox"><img src="img/side_icon01.png">客服中心</div></a></li>
  28.          <li><a href="#"><div class="sidebox"><img src="img/side_icon02.png">客户案例</div></a></li>
  29.          <li><a href="javascript:void(0);" ><div class="sidebox"><img src="img/side_icon04.png">QQ客服</div></a></li>
  30.          <li><a href="javascript:void(0);" ><div class="sidebox"><img src="img/side_icon03.png">新浪微博</div></a></li>
  31.          <li style="border:none;"><a href="javascript:goTop();" class="sidetop"><img src="img/side_icon05.png"></a></li>
  32.      </ul>
  33.  </div>
  34.  <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
  35.  <p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
  36.  </div>
  37.  </body>
  38.  </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. uCos 没有延时Tick滴答定时器测试

    原来学uCos只是表面,今天才发现uCos没有心跳也是可以活的,只是延时功能. 即:OSTimeDly.OSTimexxx 头的功能不能使用. 如果有是用OSTimexxx,任务将会卡死.其实,OST ...

  2. 射频识别技术漫谈(12)——三次相互认证【worldsing笔记】

    射频识别系统中由于卡片和读写器并不是固定连接为一个不可分割的整体,二者在进行数据通讯前如何确信对方的合法身份就变得非常重要.根据安全级别的要求不同,有的系统不需认证对方的身份,例如大多数的TTF模式的 ...

  3. ASP.NET基础系列

    一.HttpContext概述 1).如何获取对象: 在WebForm或类库(包括MVC)项目中,通过Current静态属性,就能够获得HttpContext的对象: HttpContext cont ...

  4. JavaScript的this简单实用

    1.默认绑定全局变量,在全局函数中: function fn(){ console.log(this.a); } var a=2; fn();//这里调用的是window 2.隐式绑定: functi ...

  5. IDF实验室-python ByteCode writeup

    题目地址:http://ctf.idf.cn/index.php?g=game&m=article&a=index&id=45 下载来发现是crackme.pyc 可以用unc ...

  6. 将Excel数据导入MySql

    1.将选中的数据快儿拷贝到一个TXT文本文件中(记得把后面的空格消掉..),假如存到“D:\data.txt”这个位置里. 2.根据要导入的数据快儿建立MySql数据库和表,然后进入命令提示符里使用命 ...

  7. 如何限制input只能输入数字

    在input上增加onkeyup和onafterpaste事件,事件中用正则表达式替换其它字符,测试没有问题. <input type="text" value=" ...

  8. MmSystem播放Wav格式声音

    //MmSystem播放Wav格式声音 //MmSystem 支持 *.wav声音格式 snd ->SoundRecorderuses MmSystem; //引用MmSystem//播放系统声 ...

  9. 微信公众平台java开发详解（工程代码+解析）

    原文:http://blog.csdn.net/pamchen/article/details/38718947 说明:本次的教程主要是对微信公众平台开发者模式的讲解,网络上很多类似文章,但很多都让初 ...

  10. sessionID和cookie

    一.cookie机制和session机制的区别***************************************************************************** ...