玩转 Javascript 弹出窗口, 居中与居角扩大窗口至屏幕最大值 By shawl.qiu

类别: 技术记, Javascript/Jscript(client-side)
标签:
摘要:
正文:

玩转 Javascript 弹出窗口, 居中与居角扩大窗口至屏幕最大值 By shawl.qiu


说明:
主要使用 Js 的 setInterval() 和 clearInterval() 函数完成操作.

目录:
1. 居中弹出窗口, 并逐步扩大
2. 居角弹出窗口, 并逐步扩大
3. 附加: 双击滚屏, 单击停止, 以 Scroll bar 的相对位置滚屏

shawl.qiu 
2006-10-24
http://blog.csdn.net/btbtd

1. 居中弹出窗口, 并逐步扩大
    linenum
  1. <script type="text/javascript">
  2. //<![CDATA[
  3.     if (navigator.appName=="Microsoft Internet Explorer") {
  4.         //最大化窗口
  5.         self.moveTo(-5,-5)
  6.         self.resizeTo(screen.availWidth +8,screen.availHeight+8)
  7.         //这个脚本定义的宽度其实比原窗口还要大那么一点.
  8.     }
  9.  
  10.     var w=h=200;
  11.     x=(screen.width-w)/2;
  12.     y=(screen.height-h)/2;
  13.     var n=open('','newWin','width='+w+',height='+h+',left='+x+',right='+x+',top='+y+',bottom='+y);
  14.         n.document.write('\
  15.         <script>\
  16.             document.write("temp"); /* 临时内容, 去掉出错 */ \
  17.             document.body.innerHTML=""; /* 清空页面内容 */ \
  18.             document.onclick=function(){ close();} /* 单击关闭窗口 */ \
  19.         <\/script>');
  20.         n.document.write('<h2>test moving window</h2>');
  21.         n.focus();
  22.         
  23.     var timer=setInterval('fMovingWin()',1);
  24.     
  25.     function fMovingWin(){
  26.         if (n.closed||(w>=screen.width+8&&h>=screen.height+8)) {
  27.             clearInterval(timer);
  28.             return;
  29.         }
  30.         try{
  31.             if(w<=screen.width+8)w+=2;
  32.             if(h<=screen.height+8)h+=2;
  33.             n.resizeTo(w, h)
  34.             x=(screen.width-w)/2;
  35.             y=(screen.height-h)/2;
  36.             n.moveTo(x,y)
  37.         } catch(e) {} //shawl.qiu script
  38.     }
  39.  
  40. //]]>
  41. </script>

2. 居角弹出窗口, 并逐步扩大
    linenum
  1. <script type="text/javascript">
  2. //<![CDATA[
  3.     if (navigator.appName=="Microsoft Internet Explorer") {
  4.         //最大化窗口
  5.         self.moveTo(-5,-5)
  6.         self.resizeTo(screen.availWidth +8,screen.availHeight+8)
  7.         //这个脚本定义的宽度其实比原窗口还要大那么一点.
  8.     }
  9.  
  10.     var w=h=200;
  11.     x=y=-5;
  12.     var n=open('','newWin','width='+w+',height='+h+',left='+x+',right='+x+',top='+y+',bottom='+y);
  13.         n.document.write('\
  14.         <script>\
  15.             document.write("temp"); /* 临时内容, 去掉出错 */ \
  16.             document.body.innerHTML=""; /* 清空页面内容 */ \
  17.             document.onclick=function(){ close();} /* 单击关闭窗口 */ \
  18.         <\/script>');
  19.         n.document.write('<h2>test moving window</h2>');
  20.         n.focus();
  21.         
  22.     var timer=setInterval('fMovingWin()',1);
  23.     
  24.     function fMovingWin(){
  25.         if (n.closed||(w>=screen.width+8&&h>=screen.height+8)) {
  26.             clearInterval(timer);
  27.             return;
  28.         }
  29.         try{
  30.             if(w<=screen.width+8)w+=2;
  31.             if(h<=screen.height+8)h+=2;
  32.             n.resizeTo(w, h)
  33.             
  34.             //从右下角逐步扩大窗口
  35. /*             x=screen.width-w
  36.             y=screen.height-h
  37.             n.moveTo(x,y) */
  38.             
  39.             //从左上角逐步扩大窗口
  40.             n.moveTo(x,y)
  41.         } catch(e) {}  //shawl.qiu script
  42.     }
  43.  
  44. //]]>
  45. </script>

3. 附加: 双击滚屏, 单击停止, 以 Scroll bar 的相对位置滚屏
    linenum
  1. <script type="text/javascript">
  2. //<![CDATA[
  3.     function scb(){ timer=setInterval('scrollBy(0,1)',1000) }
  4.     document.onmousedown=function(){ try{ clearInterval(timer);} catch(e){} }
  5.     document.ondblclick=function(){ scb(); }
  6. //]]> //shawl.qiu script
  7. </script>

文章相关信息:
主题: 玩转 Javascript 弹出窗口, 居中与居角扩大窗口至屏幕最大值 By shawl.qiu
发表者: shawl.qiu
电子邮件: shawl.qiu@gmail.com
QQ: 908202921
MSN: btbtd@msn.com
Homepage: http://www.btbtd.org/
Blog: http://blog.csdn.net/btbtd/
发表日期: 2006-10-24 0:00:00
更新日期: 2006-10-24 0:00:00
来源引用: shawl.qiu CSharp DotNet 个人资料管理系统
引用本页: http://gi.2288.org/mod/article/display/Default.aspx?aid=17479
关闭
Google
搜索WWW
搜索www.btbtd.org
搜索blog.csdn.net
Powered by shawl.qiu © 2008-2010 the shawl.qiu Javascript Kits
Copyright © 2008-2010 by shawl.qiu