您的位置：首页 > 其它

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

2009-07-24 10:26 369 查看

如何让弹出窗口自适应图片的大小
解决思路：
主要思路是用window.open()方法打开一个窗口，然后再根据图片的大小resizeTo()窗口大小，必要时再用moveTo()方法调整窗口位置。现在问题在于如何获取图片的大小。
具体步骤：
方法一。我们知道，DHTML里有个Image()对象，只要设置图片源src后就可以用obj.width和obj.height获取图片的宽和高，这两个数据有了之后就可以给window.open()里控制窗口大小的参数一个定值了，不过要注意，要把窗口边框、标题栏高度和图片距边界的距离计算在内。
代码如下：

<script>
var oImg
function fiximgwin(url,w,h){
if(arguments.length==1){ //如果图像大小未定义
oImg=new Image() //创建图像对象
oImg.src=url //设置图像源
Size(url) //调用Size函数获取图像尺寸
}
//如果已取得图像尺寸，打开固定大小的窗口
else window.open(url,"","width="+w+",height="+h)
}
function Size(url){
if(oImg.width&&oImg.height) //如果已取得图像尺寸
//将图像尺寸加上一定尺寸后返回给fiximgwin()函数，
//其中18和25的表现见下图右下角所示
fiximgwin(url,oImg.width+18,oImg.height+25)
else setTimeout("Size(url)",10)
}
</script>
<button onClick="fiximgwin(’http://www.flash8.net/upload/2003/9/2/2003922303578757.jpg’)">打开图片</button>
运行效果：

图1.5.11 自适合图片大小的窗口

方法二：如果你稍微细心一点，应该会发现，当不指定图片的大小时，图片默认显示原始大小，这时用obj.width和obj.height取到的也是图片的宽和高的真实值。所以可以先用window.open()方法打开一个空窗口，再以流方式给窗口写入调用图片的代码，在图片加载完后有个onload方法，用它触发resizeTo()改变窗口大小。
代码如下：

<script>
function fiximgwin(url){
//打开一个空白窗口，并初始化大小
var imgwin=window.open(’’,’img’,’width=50,height=50’)
imgwin.focus() //使窗口聚焦，成为当前窗口
//这里是关键代码，在图片加载完后调用resizeTo()和
//moveTo()方法调整窗口大小和位置
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>"
var doc=imgwin.document
doc.write(HTML) //向空白窗口写入代码
doc.close() //关闭输入流，并强制发送数据显示。
}
</script>
<button onClick="fiximgwin(’http://www.flash8.net/upload/2003/9/2/2003922303578757.jpg’)"> 打开图片</button>

运行效果：

图1.5.12 自适应图片大小的窗口
技巧：方法一的代码还可以精简如下：
<script>
function fiximgwin(url){
var oImg=new Image() //创建图像对象
oImg.src=url //设置图像源
oImg.onload=window.open(url,"","width="+(oImg.width+18)+",height="+(oImg.height+25))
}
</script>
<button onClick="fiximgwin(’http://www.flash8.net/upload/2003/9/2/2003922303578757.jpg’)"> 打开图片</button>

特别提示
两种方法的代码运行效果分别如图1.5.11、1.5.12所示。

特别说明

本例是图片对象和窗口对象的方法特性应用，对于图片对象，它有三个主要属性src、width和height，还有一个onload事件。而对于窗口对象，主要是moveTo方法和resizeTo方法。
moveTo 将窗口左上角的屏幕位置移动到指定的 x 和 y 位置。
resizeTo 将窗口的大小更改为指定的宽度和高度值。

http://www.corange.cn/archives/2008/11/2147.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航