效果图：
全部代码：
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
	*{margin:0;padding:0;}
	ul{list-style: none;}
	.slide{
		position: fixed;
		right:0;
		top:200px;
		z-index: 100;
		width:54px;
		height: 275px;
	}
	.slide ul li{
		width:54px;
		height: 54px;
		float: left;
		position: relative;
		border-bottom:1px solid #444;
	}

	.slide ul li .slide-box{
		position: absolute;
		top:0;
		right:0;
		width:54px;
		height: 54px;
		color:#fff;
		background: #000;
		opacity: 0.8;
		filter:Alpha(opacity=80);
		font-size:14px;
		overflow: hidden;
		line-height: 54px;
	}
	.slide ul li .slide-top{
		width: 54px;
		height: 54px;
		line-height: 54px;
		display: inline-block;
		background: #000;
		opacity: 0.8;
		filter:Alpha(opacity=80);
		transition: all 0.3s;
	}
	.slide ul li .slide-top:hover{
		opacity: 1;
		filter:Alpha(opacity=100);
		background: #ae1c1c;
	}
	.slide ul li img{
		float:left;
	}
	</style>
	<script type="text/javascript" src='js/jquery-2.0.3.min.js'></script>
	<script type="text/javascript">
	$(function(){
		$(".slide ul li").hover(function(){

			$(this).find(".slide-box").stop().animate({
				"width":"124px"
			},200).css({
				"opacity":"1",
				"filter":"Alpha(opacity=100)",
				"background":"#ae1c1c"
			})

		},function(){
			$(this).find(".slide-box").stop().animate({
				"width":"54px"
			},200).css({
				"opacity":"0.8",
				"filter":"Alpha(opacity=80)",
				"background":"#000"
			})
		})
		$(".slide-top").click(function(){
			$("html,body").animate({'scrollTop':0},500);
		})
	})
	</script>
</head>
<body style="height: 2000px;">

<div class='slide'>

	<ul>
		<li>
			<a href="javascript:;">
				<div class='slide-box'>
					<img src="img/side_icon01.png">客服中心
				</div>
			</a>
		</li>
		<li>
			<a href="javascript:;">
				<div class='slide-box'>
					<img src="img/side_icon02.png">客户案例
				</div>
			</a>
		</li>
		<li>
			<a href="javascript:;">
				<div class='slide-box'>
					<img src="img/side_icon03.png">新浪微博
				</div>
			</a>
		</li>
		<li>
			<a href="javascript:;">
				<div class='slide-box'>
					<img src="img/side_icon04.png">QQ客服
				</div>
			</a>
		</li>

		<li>
			<a href="javascript:;" class='slide-top'>
				<img src="img/side_icon05.png">
			</a>
		</li>

	</ul>

</div>

</body>
</html>
每日分享效果附带视频：https://www.3mooc.com/front/couinfo/999

jQuery返回顶部和在线客服网站侧边栏的更多相关文章

  1. ichat在线客服jQuery插件(可能是历史上最灵活的)

    ichat是一款开源免费在线客服jQuery插件,通过该插件,您可以自由的定制属于自己的在线客服代码. ichat充分吸收传统在线客服插件的优点,并加上自身的独特设计,使得ichat可定制性异常强大. ...

  2. 鼠标滑过弹出jquery在线客服

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 简单方便的在线客服展示插件 jQuery.onServ

    onServ jQuery.onServ 是一款简单方便的在线客服jQuery 插件,可以使任意html实现弹出展示在线客服效果, 可以自定义内容,简单配置出多个弹出动作特效,设置位置和样式. git ...

  4. pc、移动端H5网站 QQ在线客服、群链接代码【我和qq客服的那些事儿】

    转载:http://blog.csdn.net/fungleo/article/details/51835368#comments 移动端H5 QQ在线客服链接代码 <a href=" ...

  5. Tawk.to一键给自己的网站增加在线客服功能

    Tawk.to一键给自己的网站增加在线客服功能 很多外贸网站只有contact页面,留下邮箱.电话等联系方式,而在国际贸易当中能够及时在线交流沟通,能给客户留下更好的印象.接下来,就让我们一起来了解一 ...

  6. 使用 WPF+ ASP.NET MVC 开发 在线客服系统 （一）

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

  7. .net core 和 WPF 开发升讯威在线客服与营销系统：系统总体架构

    本系列文章详细介绍使用 .net core 和 WPF 开发 升讯威在线客服与营销系统 的过程.本产品已经成熟稳定并投入商用. 在线演示环境:https://kf.shengxunwei.com 注意 ...

  8. .net core 和 WPF 开发升讯威在线客服与营销系统：使用 WebSocket 实现访客端通信

    本系列文章详细介绍使用 .net core 和 WPF 开发 升讯威在线客服与营销系统 的过程.本产品已经成熟稳定并投入商用. 在线演示环境:https://kf.shengxunwei.com 注意 ...

  9. CentOS 30分钟部署 .net core 在线客服系统

    前段时间我发表了一系列文章,开始介绍基于 .net core 的在线客服系统开发过程.期间有一些朋友希望能够给出 Linux 环境的安装部署指导,本文基于 CentOS 8.3 来安装部署.在本文中我 ...

随机推荐

  1. Win10下安装python3.x+pycharm+autopep8

    一.安装Python3.X 1.Pythong官方网站:http://python.org/getit/   下载windows的安装包.有以下几个选项: 这里选择windows x86-64 exc ...

  2. 关于AndroidStudio在真机安装的apk闪退(无法打开)的解决方案

    问题描述: 重新安装AndroidStudio之后 1.发现在真机上安装apk时显示的是应用包名. 2.在真机上安装的apk无法打开,一直闪退. 如图: 解决方案: 关闭AndroidStudio的I ...

  3. CodeForces 1082 E Increasing Frequency

    题目传送门 题意:给你n个数和一个c, 现在有一个操作可以使得 [ l, r ]区间里的所有数都加上某一个值, 现在问你c最多可以是多少. 题解: pre[i] 代表的是 [1,i] 中 c 的个数是 ...

  4. 程序员过关斩将--更加优雅的Token认证方式JWT

    菜菜,上次你讲的cookie和session认证方式,我这次面试果然遇到了 结果怎么样? 结果面试官问我还有没有更好的方式? 看来你又挂了 别说了,伤心呀.到底还有没有更好的方式呢? 你猜? 基于To ...

  5. java中多线程执行时，为何调用的是start()方法而不是run()方法

    Thead类中start()方法和run()方法的区别 1,start()用来启动一个线程,当调用start()方法时,系统才会开启一个线程,通过Thead类中start()方法来启动的线程处于就绪状 ...

  6. SpringCloud入门[转]

    原文链接 一.  网站的架构演变    网络架构由最开始的三层mvc渐渐演变.传统的三层架构后来在互联网公司让几百人几千人同时开发一个项目已经变得不可行,并且会产生代码冲突的问题.基于SOA面向服务开 ...

  7. thinkphp5.1导出excel文件第三方类库运用

    若没安装请到:链接地址 https://www.phpcomposer.com/这里安装 composer 安装过的,cmd切换到项目根目录运行:composer require phpoffice/ ...

  8. 拆解大数据总线平台DBus的系统架构

    Dbus所支持两类数据源的实现原理与架构拆解. 大体来说,Dbus支持两类数据源: RDBMS数据源 日志类数据源 一.RMDBMS类数据源的实现 以mysql为例子. 分为三个部分: 日志抽取模块 ...

  9. 关闭同一网络内的windows主机

    声明这是技术讨论!切勿用来攻击别人,一切法律后果自负! 1. 在windows的cmd命令行下操作(如下操作都是以windows的机器在为主) net view #显示同一网络同所有主机 2. 打开远 ...

  10. Ganglia环境搭建并监控Hadoop分布式集群

    简介 Ganglia可以监控分布式集群中硬件资源的使用情况,例如CPU,内存,网络等资源.通过Ganglia可以监控Hadoop集群在运行过程中对集群资源的调度,作为简单地运维参考. 环境搭建流程 1 ...