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

怎么样弹出与图片同样大小的窗口?
在论坛上问过这个问题的不在少数,以前可以用无边窗口,自从IE6.0的SP1出现以后无边窗口成了coder唾骂M$的又一理由,扯远了,收回。在实现这个其实并不复杂,主要思路是用window.open()方法打开一个窗口,然后再根据图片的大小resizeTo()窗口大小,必要时再用moveTo()方法调整窗口位置。现在问题在于如何获取图片的大小。
方法一。我们知道,DHTML里有个Image()对象,只要设置图片源src后就可以用obj.width和obj.height获取图片的宽和高,这两个数据有了之后就可以给window.open()里控制窗口大小的参数一个定值了,不过要注意,要把窗口边框、标题栏高度计算在内。具体实现过程和方法参考这里:<a href="http://www.blueidea.com/tech/program/2003/104.asp" target="_blank" >http://www.blueidea.com/tech/program/2003/104.asp<;/A>
方法二。如果你稍微细心一点,应该会发现,当不指定图片的大小时,图片默认显示原始大小,这时用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,大图的地址可以通过自定义属性方式确定。

你可能感兴趣的:(弹出窗口)