漂浮窗口之相对完善版

核心提示：一、修改说明：1、主要是重写了“移动伪窗口”代码，修改为通用类，漂浮窗口之相对完善版，同样支持IE和FireFox，文件为http://www.xkb123.com/scripts/mobileWindow.js2、以后凡是需要用到漂浮窗口，顶部位置自定义；102-右侧，顶部位置自定义//201

一、修改说明：

1、主要是重写了“移动伪窗口”代码，修改为通用类，同样支持IE和FireFox，文件为http://www.xkb123.com/scripts/mobileWindow.js

2、以后凡是需要用到漂浮窗口，只要页面引用一次JS，均可以通过如下方法使之移动：

var onlineQQ=new LeesMobileWindow("dlgwnd",5,5,20,1)
onlineQQ.showWindow();
function closewindow()//关闭
{
　　onlineQQ.closeWindow();
}3、“窗口”及其样式需要自己定义

——如“在线客服”的样式定义在

http://www.xkb123.com/styles/blue/dialogwindow.css

内容定义及“窗口”启动在

http://www.xkb123.com/scripts/dialogwindow.js

——如“新消息通知”的内容定义及打开在

http://www.xkb123.com/scripts/checkNewMessage.js

二、代码如下

//-----------------------------------------------------------------------------------------
//参数说明:
//作者:吾非无心（QQ：379073825）
//时间:2008.12.12
//winname:"窗口"名字
//marginx:与浏览器左右边的边距
//marginy:与浏览器上下边的边距
//nspeed:滚动"窗口"的速度---setTimeout的值(ms)
//nstyle:"窗口"风格----放置位置
　　　　//0-左上；1-左下，2：右上；3-右下；4-中间垂直1/3；5-中间垂直1/2；6-中间垂直1/4;
　　　//101-左侧，顶部位置自定义；102-右侧，顶部位置自定义
　　　　//201顶部，左侧位置自定义；202-底部，左侧位置自定义
//tx:当nstyle为201,202时,距离浏览器左侧的位置
//tx:当nstyle为101,102时,距离浏览器顶部的位置
　　functionLeesMobileWindow(winname,marginx,marginy,nspeed,nstyle,tx,ty)
　　{
　　　　varz=this;
　　　　vart=document.getElementById(winname);
　　　　vart2=document.getElementById(winname+"iframe");
　　　　this.windowName=winname?winname:"";
　　　　this.window=t?t:null;
　　　　this.iframe=t2?t2:null;
　　　　
　　　　if(this.window==null)
　　　　　　returnnull;
　　　　
　　　　varvdsp=this.window.style.display;
　　　　this.window.style.display="";
　　　　this.width=this.window.clientWidth;
　　　　this.height=this.window.clientHeight;　　　　
　　　　this.window.style.display=vdsp;
　　　　
　　　　this.marginX=marginx?marginx:0;
　　　　this.marginY=marginy?marginy:0;
　　　　this.speed=nspeed?nspeed:100;
　　　　this.style=nstyle?nstyle:0;
　　　　//0-左上；1-左下，2：右上；3-右下；4-中间垂直1/3；5-中间垂直1/2；6-中间垂直1/4;
　　　　//101-左侧，顶部位置自定义；102-右侧，顶部位置自定义
　　　　//201顶部，左侧位置自定义；202-底部，左侧位置自定义
　　　　this.isClose=true;
　　　　this.top=ty?ty:0;
　　　　this.left=tx?tx:0;
　　　　
　　　　
　　　　varh1=0;
　　　　varh2=0;
　　　　try
　　　　{
　　　　　　h1=document.body.clientHeight;
　　　　}
　　　　catch(ex){}
　　　　try
　　　　{
　　　　　　h2=document.documentElement.clientHeight;
　　　　}
　　　　catch(ex){}
　　　　
　　　　varisXhtml=(h2<=h1&&h2!=0)?true:false;//判断当前页面的Doctype是否为Xhtml
　　　　
　　　　this.body=isXhtml?document.documentElement:document.body;
　　　　
　　　　this.moveWindow=function()
　　　　{
　　　　　　if(this.isClose)
　　　　　　{
　　　　　　　　return;
　　　　　　}
　　　　　　else
　　　　　　{
　　　　　　　　//浏览器显示区域宽度
　　　　　　　　vardw=this.body.clientWidth;
　　　　　　　　//浏览器显示区域高度
　　　　　　　　vardh=this.body.clientHeight;
　　　　　　　　//页面显示区域顶部坐标
　　　　　　　　varpt=this.body.scrollTop;
　　　　　　　　//页面显示区域左边坐标
　　　　　　　　varpl=this.body.scrollLeft;
　　　　　　　　
　　　　　　　　vart=0;
　　　　　　　　varnewTop=0;
　　　　　　　　varnewLeft=0;
　　　　　　　　switch(this.style)
　　　　　　　　{
　　　　　　　　　　case0:
　　　　　　　　　　　　newLeft=pl+this.marginX;
　　　　　　　　　　　　newTop=pt+this.marginY;
　　　　　　　　　　　　break;
　　　　　　　　　　case1:
　　　　　　　　　　　　newLeft=pl+this.marginX;
　　　　　　　　　　　　newTop=pt+dh-this.height-this.marginY;
　　　　　　　　　　　　break;
　　　　　　　　　　case2:
　　　　　　　　　　　　newLeft=pl+dw-this.width-this.marginX;
　　　　　　　　　　　　newTop=pt+this.marginY;
　　　　　　　　　　　　break;
　　　　　　　　　　case3:
　　　　　　　　　　　　newLeft=pl+dw-this.width-this.marginX;
　　　　　　　　　　　　newTop=pt+dh-this.height-this.marginY;
　　　　　　　　　　　　break;
　　　　　　　　　　case4:
　　　　　　　　　　　　t=(dw-this.width)/2;
　　　　　　　　　　　　t=t>0?t:0;
　　　　　　　　　　　　newLeft=pl+t;
　　　　　　　　　　　　t=(dh-this.height)/3;
　　　　　　　　　　　　t=t>0?t:0;
　　　　　　　　　　　　newTop=pt+t;
　　　　　　　　　　　　break;
　　　　　　　　　　case5:
　　　　　　　　　　　　t=(dw-this.width)/2;
　　　　　　　　　　　　t=t>0?t:0;
　　　　　　　　　　　　newLeft=pl+t;
　　　　　　　　　　　　t=(dh-this.height)/2;
　　　　　　　　　　　　t=t>0?t:0;
　　　　　　　　　　　　newTop=pt+t;
　　　　　　　　　　　　break;
　　　　　　　　　　case6:
　　　　　　　　　　　　t=(dw-this.width)/2;
　　　　　　　　　　　　t=t>0?t:0;
　　　　　　　　　　　　newLeft=pl+t;
　　　　　　　　　　　　t=(dh-this.height)/4;
　　　　　　　　　　　　t=t>0?t:0;
　　　　　　　　　　　　newTop=pt+t;
　　　　　　　　　　　　break;
　　　　　　　　　　case101:
　　　　　　　　　　　　newLeft=pl+this.marginX;
　　　　　　　　　　　　newTop=pt+this.marginY+this.top;
　　　　　　　　　　　　break;
　　　　　　　　　　case102:
　　　　　　　　　　　　newLeft=pl+dw-this.width-this.marginX;
　　　　　　　　　　　　newTop=pt+this.marginY+this.top;
　　　　　　　　　　　　break;
　　　　　　　　　　case201:
　　　　　　　　　　　　newLeft=pl+this.marginX+this.left;
　　　　　　　　　　　　newTop=pt+this.marginY;
　　　　　　　　　　　　break;
　　　　　　　　　　case202:
　　　　　　　　　　　　newLeft=pl+this.marginX+this.left;
　　　　　　　　　　　　newTop=pt+dh-this.height-this.marginY;
　　　　　　　　　　　　break;
　　　　　　　　　　
　　　　　　　　　　　　
　　　　　　　　}//endcase
　　　　　　　　this.window.style.top=newTop+"px";
　　　　　　　　this.window.style.left=newLeft+"px";
　　　　　　　　
　　　　　　　　if(this.iframe)
　　　　　　　　{
　　　　　　　　　　this.iframe.style.top=newTop+"px";
　　　　　　　　　　this.iframe.style.left=newLeft+"px";
　　　　　　　　　　this.iframe.style.width=this.width+2+"px";
　　　　　　　　　　this.iframe.style.height=this.height+2+"px";
　　　　　　　　}
　　　　　　　　
　　　　　　　　varself=this;
　　　　　　　　
　　　　　　　　setTimeout(function(){self.moveWindow();},this.speed);
　　　　　　}　　　　　　
　　　　}//endfunction
　　　　this.closeWindow=function()
　　　　{
　　　　　　if(this.window)
　　　　　　{
　　　　　　　　this.window.style.display="none";
　　　　　　}
　　　　　　if(this.iframe)
　　　　　　{
　　　　　　　　this.iframe.style.display="none";
　　　　　　}
　　　　　　this.isClose=true;
　　　　}
　　　　this.showWindow=function()
　　　　{
　　　　　　if(this.window)
　　　　　　{
　　　　　　　　this.window.style.display="";
　　　　　　}
　　　　　　if(this.iframe)
　　　　　　{
　　　　　　　　this.iframe.style.display="";
　　　　　　}
　　　　　　this.isClose=false;
　　　　　　this.moveWindow();
　　　　}
　　　　
　　　　returnthis;
　　}//endclass
//-----------------------------------------------------------------------------------------