实例参考：

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. 楔子（xiē zǐ）

    戏曲.小说的引子.一般放在篇首,用以点明.补充正文,或者说引出正文或是为正文做铺垫.指旧小说的引子,通常放在小说故事开始之前,起引出或补充正文的作用.这不过是个楔子,下面还有正文.——<儒林外史 ...

  2. onethink 系统函数中 生成随机加密key

    <?php /** * 生成系统AUTH_KEY */ function build_auth_key(){ $chars = 'abcdefghijklmnopqrstuvwxyz012345 ...

  3. Oracle- 查询误删数据

    使用flashback table能恢复误删数据. flashback table CONTAINER_CONTENT to timestamp to_timestamp('2010-06-30 22 ...

  4. mysql之字符集与校对集

    一.字符集 1.mysql的字符集设置非常灵活 可以设置服务器默认字符集: 数据库默认字符集: 表默认字符集: 列字符集: 如果某一级别没有指定字符集,则继承上一级. 查看所有字符集语句:show c ...

  5. create tablespace 与 heap_insert 函数

    先说 heap_insert 函数: /* * heap_insert - insert tuple into a heap * * The new tuple is stamped with cur ...

  6. 创建、显示和删除保存的用户名和密码（cmdkey）

    创建,显示和删除保存的用户名和密码: cmdkey.exe /add:targetname /user:username /pass:password

  7. ProgressSeekBar

    ProgressSeekBar.rar

  8. [React Native] Using the Image component and reusable styles

    Let's take a look at the basics of using React Native's Image component, as well as adding some reus ...

  9. S5PV210（TQ210）裸机编程

    本文很多其它的是教会大家怎样学习. 4.1    汇编学习 4.1.1 基础知识     4.1.2 ARM模拟器 4.2    S5PV210启动流程 4.3    点亮一个LED 4.4    串 ...

  10. 实例源码--Android简单团购应用源码

      下载源码   技术要点: 1.HTTP通信技术 2.XML数据解析 3.控件的简单应用 4.源码带有非常详细的中文 注释 ...... 详细介绍: 1. HTTP通信技术 通 过HTTP通信技术, ...