企业网站常用的悬浮QQ在线客服jQuery插件

前端

该悬浮QQ在线客服插件一款很实用的功能，基本每个企业网站都需要，能及时解决网站访客的提问，转化成企业的客户 。

提供6种不同颜色的皮肤以及2个完全不同风格的皮肤给用户选择。解决了之前第一版本在Chrome浏览器中，点击收缩时悬浮窗口不显示的BUG。另外，还增加了几个参数，让该插件的在应对更多需求时更具灵活性。

图片说明

需要引用的文件：

1、CSS 

1
<link rel="stylesheet" type="text/css" href="css/service.css"/>

2、jQuery

1
2
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery.fixed.1.5.1.js"></script>

3、jQuery的调用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<script language="javascript">
$(window).load(function(){
	$("#fixedBox2").fix({
		position	: "left",
		horizontal	: 50,
		vertical	: null,
		halfTop		: false,
		minStatue	: false,
		hideCloseBtn	: false,
		skin		: "gray",
		showBtnWidth	: 28,
		contentBoxWidth : 154,
		durationTime	: 600 
	});
	
	$("#fixedBox").fix({
		position	: "right",
		horizontal	: 0,
		vertical	: 100,
		halfTop		: true,
		minStatue	: false,
		hideCloseBtn	: false,
		skin		: "blue",
		showBtnWidth	: 28,
		contentBoxWidth	: 154,
		durationTime	: 1000
	});	
});
</script>

可设置项有：

  1. 悬浮的位置，右侧还是左侧
  2. 离浏览器侧边的水平方向距离
  3. 离浏览器顶部的垂直方向距离
  4. 是否垂直居中
  5. 是否默认显示最小化
  6. 是否隐藏关闭按钮
  7. 选择哪种风格皮肤
  8. 显示按钮的宽度
  9. 悬浮窗口的宽度
  10. 滑动的速度

Github: https://github.com/sufangyu/jquery-fixed-qq