Javascript 弹出窗口控制和双击滚屏-CSDN博客

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

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

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

1. 居中弹出窗口, 并逐步扩大

linenum
<script type="text/javascript">
//<![CDATA[
    if (navigator.appName=="Microsoft Internet Explorer") {
        //最大化窗口
        self.moveTo(-5,-5)
        self.resizeTo(screen.availWidth +8,screen.availHeight+8)
        //这个脚本定义的宽度其实比原窗口还要大那么一点.
    }

    var w=h=200;
    x=(screen.width-w)/2;
    y=(screen.height-h)/2;
    var n=open('','newWin','width='+w+',height='+h+',left='+x+',right='+x+',top='+y+',bottom='+y);
        n.document.write('\
        <script>\
            document.write("temp"); /* 临时内容, 去掉出错 */ \
            document.body.innerHTML=""; /* 清空页面内容 */ \
            document.οnclick=function(){ close();} /* 单击关闭窗口 */ \
        <\/script>');
        n.document.write('<h2>test moving window</h2>');
        n.focus();

    var timer=setInterval('fMovingWin()',1);

    function fMovingWin(){
        if (n.closed||(w>=screen.width+8&&h>=screen.height+8)) {
            clearInterval(timer);
            return;
        }
        try{
            if(w<=screen.width+8)w+=2;
            if(h<=screen.height+8)h+=2;
            n.resizeTo(w, h)
            x=(screen.width-w)/2;
            y=(screen.height-h)/2;
            n.moveTo(x,y)
        } catch(e) {} //shawl.qiu script
    }

//]]>
</script>

2. 居角弹出窗口, 并逐步扩大

linenum
<script type="text/javascript">
//<![CDATA[
    if (navigator.appName=="Microsoft Internet Explorer") {
        //最大化窗口
        self.moveTo(-5,-5)
        self.resizeTo(screen.availWidth +8,screen.availHeight+8)
        //这个脚本定义的宽度其实比原窗口还要大那么一点.
    }

    var w=h=200;
    x=y=-5;
    var n=open('','newWin','width='+w+',height='+h+',left='+x+',right='+x+',top='+y+',bottom='+y);
        n.document.write('\
        <script>\
            document.write("temp"); /* 临时内容, 去掉出错 */ \
            document.body.innerHTML=""; /* 清空页面内容 */ \
            document.οnclick=function(){ close();} /* 单击关闭窗口 */ \
        <\/script>');
        n.document.write('<h2>test moving window</h2>');
        n.focus();

    var timer=setInterval('fMovingWin()',1);

    function fMovingWin(){
        if (n.closed||(w>=screen.width+8&&h>=screen.height+8)) {
            clearInterval(timer);
            return;
        }
        try{
            if(w<=screen.width+8)w+=2;
            if(h<=screen.height+8)h+=2;
            n.resizeTo(w, h)

            //从右下角逐步扩大窗口
            /* x=screen.width-w
            y=screen.height-h
            n.moveTo(x,y) */

            //从左上角逐步扩大窗口
            n.moveTo(x,y)
        } catch(e) {} //shawl.qiu script
    }

//]]>
</script>

3. 双击滚屏, 单击停止, 以 Scroll bar 的相对位置滚屏

[1][2]>>下一页

linenum
<script type="text/javascript">
//<![CDATA[
    function scb(){ timer=setInterval('scrollBy(0,1)',1000) }
    document.οnmοusedοwn=function(){ try{ clearInterval(timer);} catch(e){} }
    document.οndblclick=function(){ scb(); }
//]]> //shawl.qiu script
</script>

______________________________________________

根据内容自动调整弹出窗口大小的JS解决方案

问题
在弹出创苦时，根据窗口的内容来自动调节窗口的大小，窗口如果已经和屏幕相等大小时则出现滚动条。

解决方案    在弹出的页面中添加一JS脚本方法win_onLoad()，在body的onload方法中引用win_onLoad()，在body中添加表，表的id取名为tbllist，窗口的大小就是这个table的大小在宽和高上分别加50。

部分代码如下：

<script language=javascript>
function win_onLoad(){
var width = document.all["tblKsList"].offsetWidth;
var height = document.all["tblKsList"].offsetHeight;

width = eval(width + 50);
height = eval(height + 50);

if (width < 500)
width = 500;
else if (width > screen.width)
width = screen.width;

if (height < 400)
height = 400;
else if (height > screen.height)
height = screen.height;

//alert(width);alert(height);
window.resizeTo(width,height);
}
</script>

<head></head>
<BODY bgcolor="0099CC" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" οnlοad="win_onLoad();">
<TABLE width="95%" border="0" cellpadding="0" cellspacing="0" class="table-left1-right2" style="border:1 solid #000000" id="tblList">
<TR>
<TD width="100%" valign="top" colspan=2>
欢迎使用！
</TD>
</TR>
</TABLE>
</BODY>

-----------------------------

JS&RE 控制图片显示大小, 弹出窗口自适应大小,自居中, 结合UBB与正则使用 By Stabx

实现功能:
1. 图片宽度如果大于 ##, 则显示为 ##, 小于则显示为默认. /Javascript
2. 点击图片弹出图片链接, 窗口自动适应图片大小, 并且弹出窗口居中显示. /Javascript
注: 可在页面上使用任何次数, 不需指定ID.
其他:
1. 正则替换 UBB 输入格式的图片地址为热链接 /Regular Expression - encode
2. 正则解码 HTML IMG 标签. /Regular Expression - decode

shawl.qiu
2006-5-24

//这是 ASP VBSCRIPT 中的正则
Regular Expression:
1. 正则替换 UBB IMG 标签为 HTML IMG 标签:
正则内容:
         re.Pattern = "\[img\]((http\:\/\/)|())(.*?)\[\/img\]"
         str = re.Replace(str,"<img οnlοad=""this.width=show(this.width)"" onClick=""openautosize(this.src)"" src=$2$3$4>")
2. 正则解码 HTML IMG 标签为 UBB IMG 标签
正则内容:
         re.Pattern = "<img.*?src=(.*)?\>"
         Str = re.Replace(Str,"[img]$1[/img]")

注: 使用正则特别特别要注意的就是各个正则的使用顺序.

<script LANGUAGE="JAVASCRIPT">
     //检查图片大小是否大于预期大小, 大于则显示为预期大小
     function show(chkw) { //chk size
                 if(chkw>500) {
                     chkw=500;
                     }
                 else {
                     chkw=chkw;
                 }
                 return chkw;
             }//script by shawl.qiu
     //example: <img src="images/03.jpg" onClick="openautosize(this.src)" οnlοad="this.width=show(this.width)">

     //弹出窗口, 自适应图片大小,并自动居中显示
     function openautosize(ourl) { //ourl 为接收图片地址
             dimg = new Image(); //建立图像对象
             dimg.src = ourl; //确定图像地址
             w = dimg.width ; //图像宽度
             h = dimg.height; //图像高度
             x = (screen.width - w) / 2; //减去图片宽度, 然后宽/2
             y = (screen.height - h) / 2; //减去图片高度, 然后宽/2
             window.open(ourl,"newwindow","location=1,width="+w+",height="+h+",top="+y+",bottom="+y+",left="+x+",right="+x) ;
         }//shawl.qiu script
     //example: <img src="images/03.jpg" onClick="openautosize(this.src)" οnlοad="this.width=show(this.width)">
</script>
示例:
         <img src="images/03.jpg" onClick="openautosize(this.src)" οnlοad="this.width=show(this.width)" ><br>
         <img src="images/01.jpg" onClick="openautosize(this.src)" οnlοad="this.width=show(this.width)" >

-----------------------------

自适应图片大小的弹出窗口

作者：黄山村夫

　　当我提供给浏览者多张图片时，往往是先提供一组缩略图，当访问者点击页面中的缩略图时，其对应的全尺寸图片将显示在一个新的弹出窗口中供访问者查看。如何做出为种效果呢？肯定是用弹出窗口！由于有时图片不是一样大，在弹出图片窗口时可能出现空白，影响效果。若一个窗口一个窗口按图片大小作调整，实大太麻烦了。本文提供的这种弹出窗口，可以使你一劳永益，它会根据图片的在小自动调整窗口的大小。请看下面的制作方法：

　　1、先用以下HTML代码创建一个图像的空链接：本例缩略图放在images目录下，文件名为img0003s.jpg；原图也放在images目录下，文件名为img0003.jpg，创建好的空链接代码如下：
　　 <a href="#" ><img src="images/img0003s.jpg"></a>
　　其中<a>标记的href属性指定为"#"即为空链接；<img>标记的src属性指定缩略图的URL。

　　2、在网页代码<head>与</head>之间加上如下的代码：

<script>
function newimg(imgurl) {
newwin=window.open('about:blank','','width=10,height=10'); //先新打开一个小窗口
newwin.document.write('<body leftmargin=0 topmargin=0><img id=img1 src='+imgurl+' οnlοad="self.resizeTo(this.offsetWidth,this.offsetHeight);">'); //把窗口的大小调整到与图片一样大。
}
</script>

　　3、在缩略图空链接的代码中加上οnclick="newimg('在这里写上原图的Ulr')"，最后的缩略图空链接代码如下：

    <a href="#" οnclick="newimg('images/img0003.jpg')"><img src="images/img0003s.jpg"></a>

　　到此已ＯＫ了，若有多张图片，重复上述１～３步就行了。

　　本方法的原理是利用空链接弹出一个小窗口，把图片加入，然后让窗口根据图片的大小来调整窗口的在小。
　　
　　以上代码在IE 5.x－6.0中测试通过。

----------------------------

javascript实现弹出窗口永远居中

<script>
function ShowDialog(url)
{
var iWidth=600; //模态窗口宽度
var iHeight=500;//模态窗口高度
var iTop=(window.screen.height-iHeight)/2;
var iLeft=(window.screen.width-iWidth)/2;
window.open(url,"Detail",
"Scrollbars=yes,Toolbar=no,Location=no,Direction=no,Resizeable=no,   Width="+iWidth+" ,Height="+iHeight+",top="+iTop+",left="+iLeft)
}
</script>