网站右侧折叠QQ在线客服代码-易站站长网

代码介绍：

位于网站右侧、鼠标滑过自动展开，鼠标离开自动折叠，可设置3个在线QQ客服，具体效果请查看演示。

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

演示地址：

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

演示效果图片：

代码如下：

<!-- 代码开始 www.yizhanzzw.com 易站站长网提供制作 --> 

<link href="https://www.yizhanzzw.com/yanshi/kefu14/images/yizhanzzw.css" rel="stylesheet" type="text/css">
<div class=qqbox id=divQQbox style="TOP: 591px">
<div class=qqlv id=meumid onmouseover=show() style="DISPLAY: block"><IMG src="images/qqbg.gif"></div>
<div class=qqkf id=contentid style="DISPLAY: none" onmouseout=hideMsgBox(event)>
<div class=qqkfbt id=qq-1 onfocus=this.blur(); onmouseout="showandhide('qq-','qqkfbt','qqkfbt','K',1,1);">在线客服</div>
<div id=K1 style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 10px; PADDING-TOP: 10px" align=center margin-left="5px">客服1:<A href="http://wpa.qq.com/msgrd?v=3&uin=473210378&site=qq&menu=yes" target=_blank><IMG title=易站站长网 alt=易站站长网 src="images/qq1.gif" border=0></A><BR>客服2:<A href="http://wpa.qq.com/msgrd?v=3&uin=473210378&site=qq&menu=yes" target=_blank><IMG title=易站站长网 alt=易站站长网 src="images/qq1.gif" border=0></A><BR>客服3:<A href="http://wpa.qq.com/msgrd?v=3&uin=473210378&site=qq&menu=yes" target=_blank><IMG title=易站站长网 alt=易站站长网 src="images/qq1.gif" border=0></A> </div></div></div>
<script language="javascript">
function showandhide(h_id,hon_class,hout_class,c_id,totalnumber,activeno) {
var h_id,hon_id,hout_id,c_id,totalnumber,activeno;
for (var i=1;i<=totalnumber;i++) {
document.getElementById(c_id+i).style.display='none';
document.getElementById(h_id+i).className=hout_class;
}
document.getElementById(c_id+activeno).style.display='block';
document.getElementById(h_id+activeno).className=hon_class;
}
var tips; 
var theTop = 200;
var old = theTop;
function initFloatTips() 
{ 
tips = document.getElementById('divQQbox');
moveTips();
}
function moveTips()
{
var tt=50; 
if (window.innerHeight) 
{
pos = window.pageYOffset 
}else if (document.documentElement && document.documentElement.scrollTop) {
pos = document.documentElement.scrollTop 
}else if (document.body) {
pos = document.body.scrollTop; 
}
pos=pos-tips.offsetTop+theTop; 
pos=tips.offsetTop+pos/10; 
if (pos < theTop){
pos = theTop;
}
if (pos != old) { 
tips.style.top = pos+"px";
tt=10; //alert(tips.style.top); 
}
old = pos;
setTimeout(moveTips,tt);
}
initFloatTips();
if(typeof(HTMLElement)!="undefined") //firefox定义contains()方法，ie下不起作用
{ 
HTMLElement.prototype.contains=function (obj) 
{ 
while(obj!=null&&typeof(obj.tagName)!="undefind"){
if(obj==this) return true; 
obj=obj.parentNode;
} 
return false; 
}
}
function show()
{
document.getElementById("meumid").style.display="none"
document.getElementById("contentid").style.display="block"
}
function hideMsgBox(theEvent){
if (theEvent){
var browser=navigator.userAgent;
if (browser.indexOf("Firefox")>0){ //如果是Firefox
if (document.getElementById("contentid").contains(theEvent.relatedTarget)) {
return
}
}
if (browser.indexOf("MSIE")>0 || browser.indexOf("Presto")>=0){
if (document.getElementById('contentid').contains(event.toElement)) {
return; 
}
}
}
document.getElementById("meumid").style.display = "block";
document.getElementById("contentid").style.display = "none";
}
</script> 
<!-- 代码结束 www.yizhanzzw.com 易站站长网提供制作 -->