在线QQ悬浮插件-可根据后台动态传参QQ集合-优快云博客

最近做网站需要在线QQ悬浮功能，且QQ是通过从数据库获取的集合。

下面例子为静态的QQ list集合。在此感谢 zhaizhai1988 的分享，对原文我做了相应的调整，代码看起来更整齐，而且我上传整个例子，供有需要的朋友下载，下载后直接就可以预览效果。

①js工具类 qqOnline.js

/**
*
*  qqOnline - Sonline
*  author:selina
*
**/
(function($) {
	$.fn.Sonline = function(options) {
		var opts = $.extend({}, $.fn.Sonline.defualts, options);
		$.fn.setList(opts); // 调用列表设置
		if (opts.DefaultsOpen == false) {
			$.fn.Sonline.close(opts.Position, 0);
		}
		// 展开
		$("#SonlineBox > .openTrigger").live("click", function() {
			$.fn.Sonline.open(opts.Position);
		});
		// 关闭
		$("#SonlineBox > .contentBox > .closeTrigger").live("click",
				function() {
					$.fn.Sonline.close(opts.Position, "fast");
				});
		// Ie6兼容或滚动方式显示
		if ($.browser.msie && ($.browser.version == "6.0") && !$.support.style
				|| opts.Effect == true) {
			$.fn.Sonline.scrollType();
		} else if (opts.Effect == false) {
			$("#SonlineBox").css({
				position : "fixed"
			});
		}
	}
	// plugin defaults
	$.fn.Sonline.defualts = {
		Position : "left",// left或right
		Top : 200,// 顶部距离，默认200px
		Effect : true, // 滚动或者固定两种方式，布尔值：true或
		DefaultsOpen : true, // 默认展开：true,默认收缩：false
		Qqlist : "" // 多个QQ用','隔开，QQ和客服名用'|'隔开
	}
	// 展开
	$.fn.Sonline.open = function(positionType) {
		var widthValue = $("#SonlineBox > .contentBox").width();
		if (positionType == "left") {
			$("#SonlineBox > .contentBox").animate({
				left : 0
			}, "fast");
		} else if (positionType == "right") {
			$("#SonlineBox > .contentBox").animate({
				right : 0
			}, "fast");
		}
		$("#SonlineBox").css({
			width : widthValue + 4
		});
		$("#SonlineBox > .openTrigger").hide();
	}
	// 关闭
	$.fn.Sonline.close = function(positionType, speed) {
		$("#SonlineBox > .openTrigger").show();
		var widthValue = $("#SonlineBox > .openTrigger").width();
		var allWidth = (-($("#SonlineBox > .contentBox").width()) - 6);
		if (positionType == "left") {
			$("#SonlineBox > .contentBox").animate({
				left : allWidth
			}, speed);
		} else if (positionType == "right") {
			$("#SonlineBox > .contentBox").animate({
				right : allWidth
			}, speed);
		}
		$("#SonlineBox").animate({
			width : widthValue
		}, speed);
	}
	// 子插件：设置列表参数
	$.fn.setList = function(opts) {
		$("body")
				.append(
						"<div class='SonlineBox' id='SonlineBox' style='top:-600px;'><div class='openTrigger' style='display:none' title='展开'></div><div class='contentBox'><div class='closeTrigger'><img src='icon-open.png' title='关闭' /></div><div class='titleBox'><span>客服中心</span></div><div class='listBox'></div></div></div>");
		if (opts.Qqlist == "") {
			$("#SonlineBox > .contentBox > .listBox").append(
					"<p style='padding:15px'>暂无在线客服。</p>")
		} else {
			var qqListHtml = $.fn.Sonline.splitStr(opts);
			$("#SonlineBox > .contentBox > .listBox").append(qqListHtml);
		}
		if (opts.Position == "left") {
			$("#SonlineBox").css({
				left : 0
			});
		} else if (opts.Position == "right") {
			$("#SonlineBox").css({
				right : 0
			})
		}
		$("#SonlineBox").css({
			top : opts.Top
		});
		var allHeights = 0;
		if ($("#SonlineBox > .contentBox").height() < $(
				"#SonlineBox > .openTrigger").height()) {
			allHeights = $("#SonlineBox > .openTrigger").height() + 4;
		} else {
			allHeights = $("#SonlineBox > .contentBox").height() + 4;
		}
		$("#SonlineBox").height(allHeights);
		if (opts.Position == "left") {
			$("#SonlineBox > .openTrigger").css({
				left : 0
			});
		} else if (opts.Position == "right") {
			$("#SonlineBox > .openTrigger").css({
				right : 0
			});
		}
	}
	// 滑动式效果
	$.fn.Sonline.scrollType = function() {
		$("#SonlineBox").css({
			position : "absolute"
		});
		var topNum = parseInt($("#SonlineBox").css("top") + "");
		$(window).scroll(function() {
			var scrollTopNum = $(window).scrollTop();// 获取网页被卷去的高
			$("#SonlineBox").stop(true, true).delay(0).animate({
				top : scrollTopNum + topNum
			}, "slow");
		});
	}
	// 分割QQ
	$.fn.Sonline.splitStr = function(opts) {
		var strs = new Array(); // 定义一数组
		var QqlistText = opts.Qqlist;
		strs = QqlistText.split(","); // 字符分割
		var QqHtml = ""
		for ( var i = 0; i < strs.length; i++) {
			var subStrs = new Array(); // 定义一数组
			var subQqlist = strs[i];
			subStrs = subQqlist.split("|"); // 字符分割
			QqHtml = QqHtml
					+ "<div class='QQList'><span>"
					+ subStrs[1]
					+ "：</span><a target='_blank' href='http://wpa.qq.com/msgrd?v=3&uin="
					+ subStrs[0]
					+ "&site=qq&menu=yes'><img border='0' src='http://wpa.qq.com/pa?p=2:"
					+ subStrs[0]
					+ ":41 &amp;r=0.22914223582483828' alt='点击这里'></a></div>"
		}
		return QqHtml;
	}
})(jQuery);

②css样式 qqOnline.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; cursor:pointer;  background:#0176ba url(icon-close.png) no-repeat;}
.SonlineBox .titleBox{ width:158px; height:35px; line-height:35px; background:#038bdc url(icon-bg.png) repeat-x; border-bottom:2px solid #0176ba;}
.SonlineBox .titleBox span{ margin-left:10px; color:#fff; font-size:14px; font-family:'微软雅黑','黑体';}
.SonlineBox .contentBox{ width:158px; height:auto; border:2px solid #0176ba; background:#fff; position:absolute; z-index:2;}
.SonlineBox .contentBox .closeTrigger{ width:25px; height:25px; display:block; cursor:pointer;  position:absolute; top:5px;right:5px;-webkit-transition:all 0.8s ease-out;}
.SonlineBox .contentBox .closeTrigger:hover{-webkit-transform:scale(1) rotate(360deg);}
.SonlineBox .contentBox .listBox{overflow:hidden; margin-bottom:10px;}
.SonlineBox .contentBox .listBox .QQList{ display:block; width:86%; height:22px; margin:10px auto 0px auto;}
.SonlineBox .contentBox .listBox .QQList span{float:left; line-height:22px;}
.SonlineBox .contentBox .listBox .QQList a{float:left;}

③ html页面

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>在线QQ客服悬浮插件</title>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<link href="qqOnline.css" rel="stylesheet" type="text/css"
	id="" media="all"></link>
<script type="text/javascript" src="qqOnline.js"></script>
<script>
$(function(){
 	$("body").Sonline({
  		Position:"right",//left或right
  		Top:200,//顶部距离，默认200px
  		Effect:true, //滚动或者固定两种方式，布尔值：true或false
  		DefaultsOpen:true, //默认展开：true,默认收缩：false
  		Qqlist:"418114362|客服a,418114362|客服b,418114362|客服c,418114362|客服d,418114362|客服e" //多个QQ用','隔开，QQ和客服名用'|'隔开
    });
})
</script>
</head>
<body>
	
</body>
</html>