【html】【14】特效篇--侧边栏客服

时间：2022-12-26 12:05:08

实例参考：

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>

效果:

【html】【14】特效篇--侧边栏客服

代码资源下载:

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. 鸿蒙内核源码分析&lpar;内存汇编篇&rpar; &vert; 谁是虚拟内存实现的基础 &vert; 百篇博客分析OpenHarmony源码 &vert; v14&period;14

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

  4. 用SignalR 2&period;0开发客服系统&lbrack;系列1&colon;实现群发通讯&rsqb;

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

  5. 用SignalR 2&period;0开发客服系统&lbrack;系列2&colon;实现聊天室&rsqb;

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

  6. 用SignalR 2&period;0开发客服系统&lbrack;系列4&colon;负载均衡的情况下使用SignalR&rsqb;

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

  7. C&num;开发微信门户及应用&lpar;7&rpar;-微信多客服功能及开发集成

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

  8. 使用 WPF&plus; ASP&period;NET MVC 开发 在线客服系统 （一）

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

  9. 第一篇博客：Hello World

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

随机推荐

  1. LaTeX 页眉页脚的设置

    Latex中页眉页脚的设置 1. 首先要加页眉页脚的话,需要启动宏: 我通常用fancyhdr宏包来设置页眉和页脚. \usepackage{fancyhdr} 我们在 LaTeX 中先把 page ...

  2. 跳台阶 一只青蛙一次可以跳上1级台阶，也可以跳上2级。求该青蛙跳上一个n级的台阶总共有多少种跳法。

    class Solution { public: int jumpFloor(int number) { ) ; ) ; )+jumpFloor(number-); } }; 如果先建立数组,然后利用 ...

  3. 手机端input&lbrack;type&equals;date&rsqb;的时候placeholder不起作用解决方案

    目前PC端对input 的date类型支持不好,我试下来的结果是只有chrome支持.firefox.IE11 都不支持.而且PC端有很多日历控件可供使用.就不去多考虑这点了. 那么在移动端的话,io ...

  4. AppCan移动技术全景图：创新、协作、支撑

    开发者是移动互联网宏伟蓝图的最终实现者.如果你有创意.有技术,你可以开发一款服务上亿人的应用.所以,我感觉幸运,没有任何一个时代,能像现在这么好,技术人能够服务这么广大的市场,能够撬动百亿级的市场. ...

  5. FIREDAC连接SQLITE乱码的解决

    在好多群里面都碰到问“FIREDAC连接SQLITE乱码的”的问题的同仁,遂将解决方法贴出来: 如上图所示设置 stringFormat为unicode即可

  6. Builder 模式

    Builder 模式和 AbstractFactory 模式在功能上很相似,因为都是用来创建大的复杂的对象,它们的区别是:Builder 模式强调的是一步步创建对象,并通过相同的创建过程可以获得不同的 ...

  7. Python Lib&colon;pyzmq

    http://git.oschina.net/gitlab/StartWithCoding/tree/master/example/python/pyzmq

  8. 【ShaderToy】基础篇之谈谈点、线的绘制

    写在前面 写前面一篇的时候,发现还是不够基础.因此打算增加几篇基础篇,从点线面开始,希望可以更好理解. 其实用Pixel Shader的过程很像在纸上绘画的过程.屏幕上的每一个像素对应了纸上的一个方格 ...

  9. Java学习笔记34（集合框架八：综合案例：模拟斗地主的洗牌发牌）

    规则: 1.54张扑克牌,有花色 2.顺序打乱,一人一张依次发牌,一人17张,留三张作为底牌 3.看牌:按大小王2A....43的序排列打印 示例: package demo; import java ...

  10. Dawn开源项目

    今天本人给大家推荐一个阿里开源的前端构建和工程化工具Dawn. 一. Dawn是什么? Dawn 取「黎明.破晓」之意,原为「阿里云·业务运营团队」内部的前端构建和工程化工具,现已完全开源.它通过 p ...

相关文章