上一篇文章《分享一段在线客服代码的讲解(一)》中，我们讲解了一段支持QQ在线客服代码，MSN在线客服代码，淘宝旺旺在线客服代码，将启用用户不太了解的部分做了详细解释。今天我们接着上次来讲解一下如何让这段在线客服代码拥有浮动窗口的功能。
这里是浮动代码开始的地方
//<![CDATA[
var tips; var theTop = 145/*这是默认高度,越大越往下*/;
var old = theTop; /*这是将老的高度保存起来，后面用于不断调整高度*/
function initFloatTips() {/*ok，这里我们将要初始化代码中的浮动窗口部分了，调用过来此函数，将会给tips赋值*/
tips = document.getElementById('divQQbox');
moveTips(); //这里开始漂浮在线客服，此代码主要用于计算窗口的x坐标和y坐标，并设置其位置
};
function moveTips() {
var tt=50;
//下面三个地方紧挨着的if else 主要是为了兼容不同的浏览器来设置pos的初始值为网页滚动条滚动到的位置
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;
}
//我们将网页滚动条滚动到的位置加上tips的层偏移高度
pos=pos-tips.offsetTop+theTop;
//然后再让这个高度按十分之一的方式变化
pos=tips.offsetTop+pos/10;
//如果pos小于顶部，那么让pos直接下移到顶部
if (pos < theTop) pos = theTop;
if (pos != old) {
//这里把tips层的样式表设置好，ok这里就算浮动了
tips.style.top = pos+"px";
tt=10;
//alert(tips.style.top);
}
old = pos;
//定时运行这个函数即可
setTimeout(moveTips,tt);
}
//!]]>
initFloatTips();
function OnlineOver(){
document.getElementById("divMenu").style.display = "none";
document.getElementById("divOnline").style.display = "block";
document.getElementById("divQQbox").style.width = "170px";
}
function OnlineOut(){
document.getElementById("divMenu").style.display = "block";
document.getElementById("divOnline").style.display = "none";
}
if(typeof(HTMLElement)!="undefined") //给firefox定义contains()方法，ie下不起作用
{
HTMLElement.prototype.contains=function(obj)
{
while(obj!=null&&typeof(obj.tagName)!="undefind"){ //通过循环对比来判断是不是obj的父元素
if(obj==this) return true;
obj=obj.parentNode;
}
return false;
};
}
function hideMsgBox(theEvent){ //theEvent用来传入事件，Firefox的方式
if (theEvent){
var browser=navigator.userAgent; //取得浏览器属性
if (browser.indexOf("Firefox")>0){ //如果是Firefox
if (document.getElementById('divOnline').contains(theEvent.relatedTarget)) { //如果是子元素
return; //结束函式
}
}
if (browser.indexOf("MSIE")>0){ //如果是IE
if (document.getElementById('divOnline').contains(event.toElement)) { //如果是子元素
return; //结束函式
}
}
}
/*要执行的操作*/
document.getElementById("divMenu").style.display = "block";
document.getElementById("divOnline").style.display = "none";
}
本文地址：https://www.ibangkf.com/info/462.html
版权所有 © 转载时必须以链接形式注明作者和原始出处！
上一篇：分享一段在线客服代码的讲解(一)
下一篇：不同的网站在线客服有不同的在线客服技巧