网站右侧多个超链接网站在线客服代码

代码介绍：

非常好看简洁的网站右侧客服代码，点击可关闭在线客服中心，可设置多个超链接，具体效果请查看演示。

把代码中必要的数字/文字信息修改为自己的信息，即可投入到自己的网站使用。

演示地址：

https://www.yizhanzzw.com/yanshi/kefu21/

演示效果图片：

代码如下：

<!-- 代码开始 www.yizhanzzw.com 易站站长网提供制作 --> 
<script type="text/javascript" src="https://www.yizhanzzw.com/yanshi/kefu21/js/jquery-1.8.3.min.js"></script>
<script src="https://www.yizhanzzw.com/yanshi/kefu21/js/jquery.KinSlideshow-1.2.1.min.js" type="text/javascript"></script>
<link href="https://www.yizhanzzw.com/yanshi/kefu21/css/yizhanzzw.css" rel="stylesheet" type="text/css" />
<script>
function changeOnline(num) {
	if (isNaN(num) && num == "")
		return;
	for (var i = 1; i <=6 ; i++)
	{
		if (i == num)
		{
			document.getElementById("onlineSort" + i).className = "online_bar expand";
			document.getElementById("onlineType" + i).style.display = "block";
		}
		else
		{
			document.getElementById("onlineSort" + i).className = "online_bar collapse";
			document.getElementById("onlineType" + i).style.display = "none";
		}
	}
}

$(document).ready(function(){
  $("#floatShow").bind("click",function(){
    $('#onlineService').animate({width: 'show', opacity: 'show'}, 'normal',function(){ $('#onlineService').show(); });$('#floatShow').attr('style','display:none');$('#floatHide').attr('style','display:block');
	return false;
  });
  $("#floatHide").bind("click",function(){
	$('#onlineService').animate({width: 'hide', opacity: 'hide'}, 'normal',function(){ $('#onlineService').hide(); });$('#floatShow').attr('style','display:block');$('#floatHide').attr('style','display:none');
  });
  $(document).bind("click",function(event){
	if ($(event.target).isChildOf("#online_qq_layer") == false)
	{
	 $('#onlineService').animate({width: 'hide', opacity: 'hide'}, 'normal',function(){ $('#onlineService').hide(); });$('#floatShow').attr('style','display:block');$('#floatHide').attr('style','display:none');
	}
  });
jQuery.fn.isChildAndSelfOf = function(b){
    return (this.closest(b).length > 0);
};
jQuery.fn.isChildOf = function(b){
    return (this.parents(b).length > 0);
};
  //$(window).scroll(function(){ 
	//$('#online_qq_layer').stop().animate({top:$(document).scrollTop() + $("#online_qq_layer").height()}, 100) 
  //}); 
});
</script>
<div id="online_qq_layer">
	<div id="online_qq_tab">
		<div class="online_icon">
			<a title id="floatShow" style="display: block;" href="javascript:void(0);">&nbsp;</a>
			<a title id="floatHide" style="display: none;" href="javascript:void(0);">&nbsp;</a>
		</div>
		<!--online_icon end--></div>
	<div id="onlineService">
		<div class="online_windows overz">
			<div class="online_w_top">
			</div>
			<!--online_w_top end-->
			<div class="online_w_c overz">
				<div class="online_bar expand" id="onlineSort1">
					<h2><a onclick="changeOnline(1)">域名/虚拟主机</a></h2>
					<div class="online_content overz" id="onlineType1">
						<ul class="overz">
							<li>
							<a onclick="javascript:window.open('http://b.qq.com/webc.htm?new=0&amp;sid=123456&amp;o=www.yizhanzzw.com&amp;q=7', '_blank', 'height=544, width=644,toolbar=no,scrollbars=no,menubar=no,status=no');" class="qq_icon">
							企业QQ交谈</a></li>
							<li>企业QQ： 
							<a onclick="javascript:window.open('http://b.qq.com/webc.htm?new=0&amp;sid=123456&amp;o=www.yizhanzzw.com&amp;q=7', '_blank', 'height=544, width=644,toolbar=no,scrollbars=no,menubar=no,status=no');">
							123456</a></li>
						</ul>
					</div>
					<!--online_content end--></div>
				<!--online_bar end-->
				<div class="online_bar collapse" id="onlineSort2">
					<h2><a onclick="changeOnline(2)">企业邮局</a></h2>
					<div class="online_content overz" id="onlineType2">
						<ul class="overz">
							<li>
							<a onclick="javascript:window.open('http://b.qq.com/webc.htm?new=0&amp;sid=123456&amp;o=www.yizhanzzw.com&amp;q=7', '_blank', 'height=544, width=644,toolbar=no,scrollbars=no,menubar=no,status=no');" class="qq_icon">
							企业QQ交谈</a></li>
							<li>企业QQ： 
							<a onclick="javascript:window.open('http://b.qq.com/webc.htm?new=0&amp;sid=123456&amp;o=www.yizhanzzw.com&amp;q=7', '_blank', 'height=544, width=644,toolbar=no,scrollbars=no,menubar=no,status=no');">
							123456</a></li>
						</ul>
					</div>
				</div>
				<!--online_bar end-->
				<div class="online_bar collapse" id="onlineSort3">
					<h2><a onclick="changeOnline(3)">建站之星/网店</a></h2>
					<div class="online_content overz" id="onlineType3">
						<ul class="overz">
							<li>
							<a onclick="javascript:window.open('http://b.qq.com/webc.htm?new=0&amp;sid=123456&amp;o=www.yizhanzzw.com&amp;q=7', '_blank', 'height=544, width=644,toolbar=no,scrollbars=no,menubar=no,status=no');" class="qq_icon">
							企业QQ交谈</a></li>
							<li>企业QQ： 
							<a onclick="javascript:window.open('http://b.qq.com/webc.htm?new=0&amp;sid=123456&amp;o=www.yizhanzzw.com&amp;q=7', '_blank', 'height=544, width=644,toolbar=no,scrollbars=no,menubar=no,status=no');">
							123456</a></li>
						</ul>
					</div>
				</div>
				<!--online_bar end-->
				<div class="online_bar collapse" id="onlineSort4">
					<h2><a onclick="changeOnline(4)">代理咨询</a></h2>
					<div class="online_content overz" id="onlineType4">
						<ul class="overz">
							<li>
							<a onclick="javascript:window.open('http://b.qq.com/webc.htm?new=0&amp;sid=123456&amp;o=www.yizhanzzw.com&amp;q=7', '_blank', 'height=544, width=644,toolbar=no,scrollbars=no,menubar=no,status=no');" class="qq_icon">
							企业QQ交谈</a></li>
							<li>企业QQ： 
							<a onclick="javascript:window.open('http://b.qq.com/webc.htm?new=0&amp;sid=123456&amp;o=www.yizhanzzw.com&amp;q=7', '_blank', 'height=544, width=644,toolbar=no,scrollbars=no,menubar=no,status=no');">
							123456</a></li>
						</ul>
					</div>
				</div>
				<!--online_bar end-->
				<div class="online_bar collapse" id="onlineSort5">
					<h2><a onclick="changeOnline(5)">网站推广</a></h2>
					<div class="online_content overz" id="onlineType5">
						<ul class="overz">
							<li>
							<a onclick="javascript:window.open('http://b.qq.com/webc.htm?new=0&amp;sid=123456&amp;o=www.yizhanzzw.com&amp;q=7', '_blank', 'height=544, width=644,toolbar=no,scrollbars=no,menubar=no,status=no');" class="qq_icon">
							企业QQ交谈</a></li>
							<li>企业QQ： 
							<a onclick="javascript:window.open('http://b.qq.com/webc.htm?new=0&amp;sid=123456&amp;o=www.yizhanzzw.com&amp;q=7', '_blank', 'height=544, width=644,toolbar=no,scrollbars=no,menubar=no,status=no');">
							123456</a></li>
						</ul>
					</div>
				</div>
				<!--online_bar end-->
				<div class="online_bar collapse" id="onlineSort6">
					<h2><a onclick="changeOnline(6)">橙云主机(IDC)</a></h2>
					<div class="online_content overz" id="onlineType6">
						<!-- <ul class="overz">
						<li><a class="qqlink" href="javascript:void(0);" onclick="javascript:window.open('tencent://message/?uin=934318882&amp;Site=http://www.yizhanzzw.com&amp;Menu=yes;', '_blank', 'height=544, width=644,toolbar=no,scrollbars=no,menubar=no,status=no');"><img src="../../images/qqs_1.gif" border="0">934318882</a></li>
					</ul> -->
						<ul class="overz">
							<li>
							<a class="qqlink" href="javascript:void(0);" onclick="javascript:window.open('tencent://message/?uin=123456&amp;Site=http://www.yizhanzzw.com&amp;Menu=yes;', '_blank', 'height=544, width=644,toolbar=no,scrollbars=no,menubar=no,status=no');">
							<img src="images/qqs_1.gif" border="0">123456</a></li>
						</ul>
						<ul class="overz">
							<li>
							<a class="qqlink" href="javascript:void(0);" onclick="javascript:window.open('tencent://message/?uin=123456&amp;Site=http://www.yizhanzzw.com&amp;Menu=yes;', '_blank', 'height=544, width=644,toolbar=no,scrollbars=no,menubar=no,status=no');">
							<img src="images/qqs_1.gif" border="0">123456</a></li>
						</ul>
					</div>
				</div>
				<!--online_bar end--></div>
			<!--online_w_c end-->
			<div class="online_w_bottom">
			</div>
			<!--online_w_bottom end--></div>
		<!--online_windows end--></div>
</div>
<!-- 代码结束 www.yizhanzzw.com 易站站长网提供制作 --> 

 

使用说明：

1.复制以上代码 从<!-- 代码 开始 --> 复制到<!-- 代码 结束 -->

2.建议将代码放入到网站的<body></body>或者<footer></footer>之间、或者网站后台有插入第三方统计代码的地方，也可以直接放入第三方统计代码中。

3.刷新已经放入的网站，即可生效。

代码修改提示说明：

1.代码中的图片地址只是为了展示效果采用本站的图片地址，正式使用的时候可以自定义修改为自己的图片地址。

2.代码中的CSS和JS引用链接地址，非必要，建议不要修改，本站地址永久有效，并且秒加载。

3.如果不能在代码中直接修改为自己的信息，那么只需要将本站引用的CSS/JS下载到本地即可实现修改使用。

4.如果是对代码没有基础的同学，建议只修改代码中的自己需要展示的信息即可，代码字符就请勿修改，以防止乱码不能正常显示。

5.如果是对代码有一定基础的同学，当然是想怎么改就怎么改啦~