站长论坛 站长下载

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

　 2007年10月25日03:36:38　 评论(0条) 字体:[大 中 小]
相关热点： 窗口 大小 图片 适应 尺寸 代码 // 显示 no 指定 属性

很多时候我们需要提供这样的功能给访问者：当访问者点击页面中的缩略图时，其对应的全尺寸图片将显示在一个新的弹出窗
口中供访问者查看。
　　实现此功能的最简单作法是用以下HTML代码创建一个图像链接：
　　
　　其中标记的href属性指定全尺寸图片的URL，target属性设置为_blank指定在新窗口中显示该图片；标记的src属性指定缩略图的
URL。

　　如果我们想对显示全尺寸图片的窗口的外观进行某些控制（比如希望弹出窗口的高度、宽度能与全尺寸图片的大小匹配时），则可
调用 window.open 方法，该方法接收三个参数，分别指定要打开文件的URL，窗口名及窗口特性，在窗口特性参数中可指定窗口的高
度、宽度，是否显示菜单栏、工具栏等。以下代码将显示全尺寸图片在一个没有工具栏、地址栏、状态栏、菜单栏，宽、高分别为400、
350的窗口中：


　　这里就提出了个问题，如果所有全尺寸图片都具有统一的大小（比如都是400x350），那么以上代码适用于所有的缩略图片链接（只
是href属性指向的全尺寸图片文件不同）。但如果全尺寸图片的大小并不统一，还用以上代码则我们需要先取得每幅全尺寸图片的大
小，然后在window.open方法的窗口特性参数中一一设置height和width为正确的值，在图片数量较多的情况下，这显然效率太低了。那
么是否有一劳永逸的方法，即让弹出窗口能自动适应要显示图片的大小？通过研究，发现可以使用 DHTML 中的 Image 对象来达到我们
的目的，Image 对象可动态装载指定的图片，通过读取其 width 和 height 属性即能获得装入图片的大小，以此来设置弹出窗口的大
小，即可实现自适应图片大小的弹出窗口了。下面即是实现代码:




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();
}
}
//-->


　　使用时将上面的代码放在网页文档的标记对中，然后在链接的点击事件中调用OpenFullSizeWindow函数，如即可。
　　以上代码在IE 5.x－6.0中测试通过。

责任编辑：

上一篇：Javascript无限分类算法的实现  
下一篇：自由设定弹出窗口时间并且一天只弹一次

收藏本文 打印本文 　 告诉好友　 投稿邮箱

相关新闻

·快速建立我的英文版网站
·web2.0网站常用模块分析
·合理架构css
·Adobe GoLive 5.0 考试大纲
·Golive CS2新增功能
·Adobe GoLive CS2中文版界面抢先看
·Adobe Golive进阶教程(课程一——页面排版1

最新评论共有 0 位网友发表了评论

发表评论

评论内容：不能超过250字，需审核，请自觉遵守互联网相关政策法规。

用户名： 密码： 验证码： 匿名? 注册

最新图文

• 
  做就做自己喜欢的
• 
  什么样的网上简历最“抢
• 
  一个女站长的网络历程
• 
  盘点"非主流"的发展史

• 
  Photoshop简单几步快速
• 
  Photoshop参数预设与图
• 
  Photoshop简单几步打造
• 
  无价：Photoshop制作一

新闻线索

如果你有站长界人事变动、重组并购、变革技术出现，以及产品投诉等重要新闻线索，请告诉我们，我们会给予特别关注。
0631-3653338
站长中国编辑部
站长中国24小时新闻热线： 13256307008