jquery实现右侧悬浮客服中心多个qq客服聊天效果代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：jquery实现右侧悬浮客服中心多个qq客服聊天效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!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" />
    <style>
        /*默认蓝色*/
    .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(//repo.bfw.wiki/bfwrepo/images/kefu/openTrigger.jpg) no-repeat;}
    .SonlineBox .titleBox{ width:158px; height:35px; line-height:35px; background:#038bdc url(//repo.bfw.wiki/bfwrepo/images/kefu/SonlineTitleBg.gif) 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;}
    </style>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.1.11.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-migrate-1.2.1.min.js"></script>
    <script language="javascript">
        (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'.........完整代码请登录后点击上方下载按钮下载查看