实例参考：

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. 转载MSDN 在ASP.NET 中执行 URL 重写

    转载文章原网址 http://msdn.microsoft.com/zh-cn/library/ms972974.aspx 摘要:介绍如何使用 Microsoft ASP.NET 执行动态 URL 重 ...

  2. 转载Entity Framework 5.0（EF first）中的添加，删除，修改，查询，状态跟踪操作

    转载原出处:http://www.cnblogs.com/kenshincui/p/3345586.html Entity Framework将概念模型中定义的实体和关系映射到数据源,利用实体框架可以 ...

  3. Sublime Text2 中Emmet(之前叫Zencoding)插件安装以及使用

    一.添加插件之前先 下载Package Control 按 Ctrl+`(就是~这个键) 复制下面的代码 确认 重新启动sublime text2 import urllib2,os;pf='Pack ...

  4. C#学习笔记——面向对象、面向组件以及类型基础

    C#学习笔记——面向对象.面向组件以及类型基础 目录 一 面向对象与面向组件 二 基元类型与 new 操作 三 值类型与引用类型 四 类型转换 五 相等性与同一性 六 对象哈希码 一 面向对象与面向组 ...

  5. SUSE的SSHD配置及设置防火墙

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...

  6. python抓取伯乐在线的全部文章，对标题分词后存入mongodb中

    依赖包: 1.pymongo 2.jieba # -*- coding: utf-8 -*- """ @author: jiangfuqiang "" ...

  7. 信号之sigpending函数

    sigpending函数返回信号集,其中的各个信号对于调用进程是阻塞的而不能递送,因而也一定是当前未决的.该信号集通过set参数返回.(这些信号是已经产生的信号,但因为信号屏蔽字中对其设置了屏蔽位,从 ...

  8. c语言—临界资源管理

    临界区管理的基本原则是: ①如果有若干进程要求进入空闲的临界区,一次仅允许一个进程进入.②任何时候,处于临界区内的进程不可多于一个.如已有进程进入自己的临界区,则其它所有试图进入临界区的进程必须等待. ...

  9. servlet案例

    1.重定向 方式1:在servlet中写:response.setStatus(302);      response.setHeader("Location","路径& ...

  10. Joseph cicyle's algorithm

    约瑟夫环问题: 输入:1)总共人数:2)每次被杀的序号数: 输出:最后一个活着的序号 python代码如下: n=int (input('please input the number of peop ...