如何处理Javascript弹出窗口和双击滚屏的问题。
Javascript 弹出窗口, 居中与居角扩大窗口至屏幕最大值和双击滚屏说明:
主要使用 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.onclick=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.onclick=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 的相对位置滚屏
linenum
<script type="text/javascript">
//<![CDATA[
function scb(){ timer=setInterval('scrollBy(0,1)',1000) }
document.onmousedown=function(){ try{ clearInterval(timer);} catch(e){} }
document.ondblclick=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" onload="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 onload=""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)" onload="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)" onload="this.width=show(this.width)">
</script>
示例:
<img src="images/03.jpg" onClick="openautosize(this.src)" onload="this.width=show(this.width)" ><br>
<img src="images/01.jpg" onClick="openautosize(this.src)" onload="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+' onload="self.resizeTo(this.offsetWidth,this.offsetHeight);">'); //把窗口的大小调整到与图片一样大。
}
</script>
3、在缩略图空链接的代码中加上onclick="newimg('在这里写上原图的Ulr')"，最后的缩略图空链接代码如下：
<a href="#" onclick="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>
————————————————————————————
本文地址：http://www.45fan.com/dnjc/66949.html