漂浮窗口之相对完善版(原创,转载请注明出处)
修改说明:
1、主要是重写了“移动伪窗口”代码,修改为通用类,文件为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
一、修改说明:
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
二、代码如下
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
//-----------------------------------------------------------------------------------------
//参数说明:
//作者:吾非无心(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在线客服"的例子;另外一个是检查是否有新的站内消息的,只有当用户有新的消息才会显示在右下角)