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

一、修改说明：
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时,距离浏览器左侧的位置
//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在线客服"的例子;另外一个是检查是否有新的站内消息的,只有当用户有新的消息才会显示在右下角)