漂浮窗口之相对完善版

　2010-09-14 13:33:50　来源：WEB开发网　闂傚倸鍊搁崐椋庢濮橆兗缂氱憸宥堢亱闂佸湱铏庨崰鏍不椤栫偞鐓ラ柣鏇炲€圭€氾拷

闂傚倸鍊搁崐椋庣矆娓氣偓楠炲鏁撻悩鎻掔€梺姹囧灩閻忔艾鐣烽弻銉︾厵闁规鍠栭。濂告煕鎼达紕校闁靛洤瀚伴獮鎺楀箣濠靛啫浜鹃柣銏⑶圭壕濠氭煙閻愵剚鐏辨俊鎻掔墛缁绘盯宕卞Δ鍐冣剝绻涘畝濠佺敖缂佽鲸鎹囧畷鎺戭潩閹典焦鐎搁梻浣烘嚀閸ゆ牠骞忛敓锟�

婵犵數濮烽弫鍛婃叏椤撱垹绠柛鎰靛枛瀹告繃銇勯幘瀵哥畼闁硅娲熷缁樼瑹閳ь剙岣胯鐓ら柕鍫濇偪濞差亜惟闁宠桨鑳堕崝锕€顪冮妶鍡楃瑐闁煎啿鐖奸崺濠囧即閵忥紕鍘梺鎼炲劗閺呮稒绂掕缁辨帗娼忛埡浣锋闂佽桨鐒﹂幑鍥极閹剧粯鏅搁柨鐕傛嫹闂傚倸鍊搁崐椋庢濮橆兗缂氱憸宥堢亱闂佸湱铏庨崰鏍不椤栫偞鐓ラ柣鏇炲€圭€氾拷　　闂傚倸鍊搁崐鐑芥嚄閼哥數浠氱紓鍌欒兌缁垶銆冮崨鏉戠厺鐎广儱顦崡鎶芥煏韫囨洖校闁诲寒鍓熷铏圭磼濡搫顫岄梺鍦拡閸嬪棝鎯€椤忓浂妯勯梺鍝勬湰濞叉ḿ鎹㈠┑濠勭杸闁哄洨濮烽悰銉╂⒒娴ｅ搫甯跺鐟帮攻缁傚秴饪伴崼姘ｅ亾閺冨牆绀冩い蹇庣娴滈箖鏌ㄥ┑鍡涱€楀褜鍠栭湁闁绘ɑ鐟ョ€氼喚绮绘ィ鍐╃厱妞ゆ劑鍊曢弸搴ㄦ煟韫囧鍔滈柕鍥у瀵潙螣閸濆嫬袝婵＄偑鍊戦崹娲偡閳哄懎绠栭柍鈺佸暞閸庣喖鏌曢崶褍绨婚柟鍑ゆ嫹

核心提示：一、修改说明：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 //-----------------------------------------------------------------------------------------