漂浮窗口之相对完善版(原创，转载请注明出处）

一、修改说明：

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

二、代码如下

Code

//-----------------------------------------------------------------------------------------

//参数说明:

//作者:吾非无心（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时,距离浏览器左侧的位置

//ty:当nstyle为101,102时,距离浏览器顶部的位置

function LeesMobileWindow(winname,marginx,marginy,nspeed,nstyle,tx,ty)

{

var z=this;

var t=document.getElementById(winname);

var t2=document.getElementById(winname+"iframe");

this.windowName=winname?winname:"";

this.window=t?t:null;

this.iframe=t2?t2:null;

if(this.window==null)

return null;

var vdsp=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;

var h1=0;

var h2=0;

try

{

h1 = document.body.clientHeight;

}

catch(ex){}

try

{

h2 = document.documentElement.clientHeight;

}

catch(ex){}

var isXhtml =(h2<=h1&&h2!=0)?true:false; //判断当前页面的Doctype是否为Xhtml

this.body = isXhtml?document.documentElement:document.body;

this.moveWindow=function()

{

if(this.isClose)

{

return;

}

else

{

//浏览器显示区域宽度

var dw=this.body.clientWidth;

//浏览器显示区域高度

var dh=this.body.clientHeight;

//页面显示区域顶部坐标

var pt=this.body.scrollTop;

//页面显示区域左边坐标

var pl=this.body.scrollLeft;

var t=0;

var newTop=0;

var newLeft=0;

switch(this.style)

{

case 0:

newLeft=pl+this.marginX;

newTop=pt+this.marginY;

break;

case 1:

newLeft=pl+this.marginX;

newTop=pt+dh-this.height-this.marginY;

break;

case 2:

newLeft=pl+dw-this.width-this.marginX;

newTop=pt+this.marginY;

break;

case 3:

newLeft=pl+dw-this.width-this.marginX;

newTop=pt+dh-this.height-this.marginY;

break;

case 4:

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;

case 5:

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;

case 6:

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;

case 101:

newLeft=pl+this.marginX;

newTop=pt+this.marginY+this.top;

break;

case 102:

newLeft=pl+dw-this.width-this.marginX;

newTop=pt+this.marginY+this.top;

break;

case 201:

newLeft=pl+this.marginX+this.left;

newTop=pt+this.marginY;

break;

case 202:

newLeft=pl+this.marginX+this.left;

newTop=pt+dh-this.height-this.marginY;

break;

}//end case

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";

}

var self=this;

setTimeout(function(){self.moveWindow();},this.speed);

}

}//end function

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();

}

return this;

}//end class

//-----------------------------------------------------------------------------------------

实例地址: http://www.xkb123.com (不过一般只能看到一个"QQ在线客服"的例子;另外一个是检查是否有新的站内消息的,只有当用户有新的消息才会显示在右下角)