|
|
在论坛上问过这个问题的不在少数，以前可以用无边窗口，自从IE6.0的SP1出现以后无边窗口成了coder唾骂M$的又一理由，扯远了，收回。在实现这个其实并不复杂，主要思路是用window.open()方法打开一个窗口，然后再根据图片的大小resizeTo()窗口大小，必要时再用moveTo()方法调整窗口位置。现在问题在于如何获取图片的大小。
方法一。我们知道，DHTML里有个Image()对象，只要设置图片源src后就可以用obj.width和obj.height获取图片的宽和高，这两个数据有了之后就可以给window.open()里控制窗口大小的参数一个定值了，不过要注意，要把窗口边框、标题栏高度计算在内。具体实现过程为：
实现此功能的最简单作法是用以下HTML代码创建一个图像链接：
<a href="fullsize.jpg" target="_blank"><img src="small.jpg"></a>
其中<a>标记的href属性指定全尺寸图片的URL，target属性设置为_blank指定在新窗口中显示该图片；<img>标记的src属性指定缩略图的URL。
如果我们想对显示全尺寸图片的窗口的外观进行某些控制（比如希望弹出窗口的高度、宽度能与全尺寸图片的大小匹配时），则可调用 window.open 方法，该方法接收三个参数，分别指定要打开文件的URL，窗口名及窗口特性，在窗口特性参数中可指定窗口的高度、宽度，是否显示菜单栏、工具栏等。以下代码将显示全尺寸图片在一个没有工具栏、地址栏、状态栏、菜单栏，宽、高分别为400、350的窗口中：
<a href="fullsize.jpg" onClick="window.open(this.href,'', 'height=350,width=400,toolbar=no,location=no,status=no,menubar=no');return false"><img src="small.jpg"></a>
这里就提出了个问题，如果所有全尺寸图片都具有统一的大小（比如都是400x350），那么以上代码适用于所有的缩略图片链接（只是href属性指向的全尺寸图片文件不同）。但如果全尺寸图片的大小并不统一，还用以上代码则我们需要先取得每幅全尺寸图片的大小，然后在window.open方法的窗口特性参数中一一设置height和width为正确的值，在图片数量较多的情况下，这显然效率太低了。那么是否有一劳永逸的方法，即让弹出窗口能自动适应要显示图片的大小？通过研究，发现可以使用 DHTML 中的 Image 对象来达到我们的目的，Image 对象可动态装载指定的图片，通过读取其 width 和 height 属性即能获得装入图片的大小，以此来设置弹出窗口的大小，即可实现自适应图片大小的弹出窗口了。下面即是实现代码:
<script language="javascript" type="text/javascript">
<!--
var imgObj;
function checkImg(theURL,winName){
// 对象是否已创建
if (typeof(imgObj) == "object"){
// 是否已取得了图像的高度和宽度
if ((imgObj.width != 0) && (imgObj.height != 0))
// 根据取得的图像高度和宽度设置弹出窗口的高度与宽度，并打开该窗口
// 其中的增量 20 和 30 是设置的窗口边框与图片间的间隔量
OpenFullSizeWindow(theURL,winName, ",width=" + (imgObj.width+20) + ",height=" + (imgObj.height+30));
else
// 因为通过 Image 对象动态装载图片，不可能立即得到图片的宽度和高度，所以每隔100毫秒重复调用检查
setTimeout("checkImg('" + theURL + "','" + winName + "')", 100)
}
}
function OpenFullSizeWindow(theURL,winName,features) {
var aNewWin, sBaseCmd;
// 弹出窗口外观参数
sBaseCmd = "toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,";
// 调用是否来自 checkImg
if (features == null || features == ""){
// 创建图像对象
imgObj = new Image();
// 设置图像源
imgObj.src = theURL;
// 开始获取图像大小
checkImg(theURL, winName)
}
else{
// 打开窗口
aNewWin = window.open(theURL,winName, sBaseCmd + features);
// 聚焦窗口
aNewWin.focus();
}
}
//-->
</script>
使用时将上面的代码放在网页文档的<head></head>标记对中，然后在链接的点击事件中调用OpenFullSizeWindow函数，如<a href="fullsize.jpg" onClick="OpenFullSizeWindow(this.href,'','');return false"><img src="small.jpg"></a>即可。
以上代码在IE 5.x－6.0中测试通过。
方法二。如果你稍微细心一点，应该会发现，当不指定图片的大小时，图片默认显示原始大小，这时用obj.width和obj.height取到的也是图片的宽和高的真实值。所以可以先用window.open()方法打开一个空窗口，再以流方式给窗口写入调用图片的代码，在图片加载完后有个onload方法，用它触发resizeTo()改变窗口大小。代码如下：
<script>
function fiximgwin(url)
{
var imgwin=window.open('','img','width=50,height=50')//打开一个空白窗口，并初始化大小
imgwin.focus()//使窗口聚焦，成为当前窗口
var HTML="<html>\r\n<head>\r\n<title>图片浏览</title>\r\n</head>\r\n<body leftmargin=\"0\" topmargin=\"0\">\r\n<img src=\""+url+"\" onload=\"window.resizeTo(this.width+10,this.height+36);window.moveTo((screen.width-this.width)/2,(screen.height-this.height)/2)\">\r\n</body>\r\n</html>"//这里是关键代码，在图片加载完后调用resizeTo()和moveTo()方法调整窗口大小和位置
var doc=imgwin.document
doc.open("text/html","replace") //指定文档的多用途网际邮件扩充协议
doc.write(HTML)//向空白窗口写入代码
doc.close()//关闭输入流，并强制发送数据显示。
}
</script>
<img onclick=fiximgwin("images/wfsr.gif") src=wfsr.gif>
<img onclick=fiximgwin("banner.gif") src=images/logo.gif>
代码就这么多，如果网站里需要用到这种效果的地方很多，可以考虑把它做成HTC，大图的地址可以通过自定义属性方式确定。
怎么样弹出与图片同样大小的窗口？
在论坛上问过这个问题的不在少数，以前可以用无边窗口，自从IE6.0的SP1出现以后无边窗口成了coder唾骂M$的又一理由，扯远了，收回。在实现这个其实并不复杂，主要思路是用window.open()方法打开一个窗口，然后再根据图片的大小resizeTo()窗口大小，必要时再用moveTo()方法调整窗口位置。现在问题在于如何获取图片的大小。
方法一。我们知道，DHTML里有个Image()对象，只要设置图片源src后就可以用obj.width和obj.height获取图片的宽和高，这两个数据有了之后就可以给window.open()里控制窗口大小的参数一个定值了，不过要注意，要把窗口边框、标题栏高度计算在内。具体实现过程为：
实现此功能的最简单作法是用以下HTML代码创建一个图像链接：
<a href="fullsize.jpg" target="_blank"><img src="small.jpg"></a>
其中<a>标记的href属性指定全尺寸图片的URL，target属性设置为_blank指定在新窗口中显示该图片；<img>标记的src属性指定缩略图的URL。
如果我们想对显示全尺寸图片的窗口的外观进行某些控制（比如希望弹出窗口的高度、宽度能与全尺寸图片的大小匹配时），则可调用 window.open 方法，该方法接收三个参数，分别指定要打开文件的URL，窗口名及窗口特性，在窗口特性参数中可指定窗口的高度、宽度，是否显示菜单栏、工具栏等。以下代码将显示全尺寸图片在一个没有工具栏、地址栏、状态栏、菜单栏，宽、高分别为400、350的窗口中：
<a href="fullsize.jpg" onClick="window.open(this.href,'', 'height=350,width=400,toolbar=no,location=no,status=no,menubar=no');return false"><img src="small.jpg"></a>
这里就提出了个问题，如果所有全尺寸图片都具有统一的大小（比如都是400x350），那么以上代码适用于所有的缩略图片链接（只是href属性指向的全尺寸图片文件不同）。但如果全尺寸图片的大小并不统一，还用以上代码则我们需要先取得每幅全尺寸图片的大小，然后在window.open方法的窗口特性参数中一一设置height和width为正确的值，在图片数量较多的情况下，这显然效率太低了。那么是否有一劳永逸的方法，即让弹出窗口能自动适应要显示图片的大小？通过研究，发现可以使用 DHTML 中的 Image 对象来达到我们的目的，Image 对象可动态装载指定的图片，通过读取其 width 和 height 属性即能获得装入图片的大小，以此来设置弹出窗口的大小，即可实现自适应图片大小的弹出窗口了。下面即是实现代码:
<script language="javascript" type="text/javascript">
<!--
var imgObj;
function checkImg(theURL,winName){
// 对象是否已创建
if (typeof(imgObj) == "object"){
// 是否已取得了图像的高度和宽度
if ((imgObj.width != 0) && (imgObj.height != 0))
// 根据取得的图像高度和宽度设置弹出窗口的高度与宽度，并打开该窗口
// 其中的增量 20 和 30 是设置的窗口边框与图片间的间隔量
OpenFullSizeWindow(theURL,winName, ",width=" + (imgObj.width+20) + ",height=" + (imgObj.height+30));
else
// 因为通过 Image 对象动态装载图片，不可能立即得到图片的宽度和高度，所以每隔100毫秒重复调用检查
setTimeout("checkImg('" + theURL + "','" + winName + "')", 100)
}
}
function OpenFullSizeWindow(theURL,winName,features) {
var aNewWin, sBaseCmd;
// 弹出窗口外观参数
sBaseCmd = "toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,";
// 调用是否来自 checkImg
if (features == null || features == ""){
// 创建图像对象
imgObj = new Image();
// 设置图像源
imgObj.src = theURL;
// 开始获取图像大小
checkImg(theURL, winName)
}
else{
// 打开窗口
aNewWin = window.open(theURL,winName, sBaseCmd + features);
// 聚焦窗口
aNewWin.focus();
}
}
//-->
</script>
使用时将上面的代码放在网页文档的<head></head>标记对中，然后在链接的点击事件中调用OpenFullSizeWindow函数，如<a href="fullsize.jpg" onClick="OpenFullSizeWindow(this.href,'','');return false"><img src="small.jpg"></a>即可。
以上代码在IE 5.x－6.0中测试通过。
方法二。如果你稍微细心一点，应该会发现，当不指定图片的大小时，图片默认显示原始大小，这时用obj.width和obj.height取到的也是图片的宽和高的真实值。所以可以先用window.open()方法打开一个空窗口，再以流方式给窗口写入调用图片的代码，在图片加载完后有个onload方法，用它触发resizeTo()改变窗口大小。代码如下：
<script>
function fiximgwin(url)
{
var imgwin=window.open('','img','width=50,height=50')//打开一个空白窗口，并初始化大小
imgwin.focus()//使窗口聚焦，成为当前窗口
var HTML="<html>\r\n<head>\r\n<title>图片浏览</title>\r\n</head>\r\n<body leftmargin=\"0\" topmargin=\"0\">\r\n<img src=\""+url+"\" onload=\"window.resizeTo(this.width+10,this.height+36);window.moveTo((screen.width-this.width)/2,(screen.height-this.height)/2)\">\r\n</body>\r\n</html>"//这里是关键代码，在图片加载完后调用resizeTo()和moveTo()方法调整窗口大小和位置
var doc=imgwin.document
doc.open("text/html","replace") //指定文档的多用途网际邮件扩充协议
doc.write(HTML)//向空白窗口写入代码
doc.close()//关闭输入流，并强制发送数据显示。
}
</script>
<img onclick=fiximgwin("images/wfsr.gif") src=wfsr.gif>
<img onclick=fiximgwin("banner.gif") src=images/logo.gif>
代码就这么多，如果网站里需要用到这种效果的地方很多，可以考虑把它做成HTC，大图的地址可以通过自定义属性方式确定。 |
|
IP卡
狗仔卡
发表于 2007-9-27 22:30:29
QQ好友和群
QQ空间
腾讯微博
腾讯朋友
收藏
转播
分享
淘帖
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
