jquery实现漂浮在网页右侧的qq在线客服插件

最新推荐文章于 2022-03-26 20:22:32 发布

姚虎才子

最新推荐文章于 2022-03-26 20:22:32 发布

阅读量3.4k

点赞数 1

分类专栏： jquery 文章标签： jquery实现漂浮网页qq客服

本文链接：https://blog.csdn.net/yaohucaizi/article/details/8916874

版权

本文提供了一种实用的QQ在线客服代码实现，通过jQuery技术，实现点击QQ图标即可启动与客服的对话功能。包括html页面结构、css样式及素材下载链接，由yaohucaizi原创并分享。

摘要由CSDN通过智能技术生成

很实用的一款QQ在线客服代码，点击QQ图标，可直接与客服对话。具体实现代码如下：

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=gb2312" />
<title>jquery实现qq客服</title>
<link rel="stylesheet" type="text/css" href="css/base.css"/>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/qqservice.js"></script>
<script type="text/javascript">
$(function(){
	$("body").Sonline({
		Position:"right",//left或right
		Top:200,//顶部距离，默认200px
		Effect:true, //滚动或者固定两种方式，布尔值：true或false
		DefaultsOpen:true, //默认展开：true,默认收缩：false
		Qqlist:"435027|客服01,435027|客服02,435027|客服03,435027|客服04,435027|客服05" //多个QQ用','隔开，QQ和客服名用'|'隔开
	});
})	
</script>
</head>
<body>
<div style="height:2500px"></div>
<div style="text-align:center;clear:both"></div>
</body>
</html>

css样式：

/*默认蓝色*/
.SonlineBox{ width:162px; font-size:12px;overflow:hidden; z-index:9999;}
.SonlineBox .openTrigger{ width:30px; height:110px; position:absolute; top:0px;  z-index:1; cur