|
很多时候我们需要提供这样的功能给访问者当访问者点击页面中的缩略图时其对应的全尺寸图片将显示在一个新的弹出窗口中供访问者查看 实现此功能的最简单作法是用以下HTML代码创建一个图像链接 <a target=_blank><img src=smalljpg></a> 其中<a>标记的href属性指定全尺寸图片的URLtarget属性设置为_blank指定在新窗口中显示该图片<img>标记的src属性指定缩略图的URL 如果我们想对显示全尺寸图片的窗口的外观进行某些控制（比如希望弹出窗口的高度宽度能与全尺寸图片的大小匹配时）则可调用 windowopen 方法该方法接收三个参数分别指定要打开文件的URL窗口名及窗口特性在窗口特性参数中可指定窗口的高度宽度是否显示菜单栏工具栏等以下代码将显示全尺寸图片在一个没有工具栏地址栏状态栏菜单栏宽高分别为的窗口中 <a onClick=windowopen(thishref height=width=toolbar=nolocation=nostatus=nomenubar=no);return false><img src=smalljpg></a> 这里就提出了个问题如果所有全尺寸图片都具有统一的大小（比如都是x）那么以上代码适用于所有的缩略图片链接（只是href属性指向的全尺寸图片文件不同）但如果全尺寸图片的大小并不统一还用以上代码则我们需要先取得每幅全尺寸图片的大小然后在windowopen方法的窗口特性参数中一一设置height和width为正确的值在图片数量较多的情况下这显然效率太低了那么是否有一劳永逸的方法即让弹出窗口能自动适应要显示图片的大小？通过研究发现可以使用 DHTML 中的 Image 对象来达到我们的目的Image 对象可动态装载指定的图片通过读取其 width 和 height 属性即能获得装入图片的大小以此来设置弹出窗口的大小即可实现自适应图片大小的弹出窗口了下面即是实现代码: <script language=JavaScript type=text/JavaScript> <! var imgObj; function checkImg(theURLwinName){ // 对象是否已创建 if (typeof(imgObj) == object){ // 是否已取得了图像的高度和宽度 if ((imgObjwidth != ) && (imgObjheight != )) // 根据取得的图像高度和宽度设置弹出窗口的高度与宽度并打开该窗口 // 其中的增量 和 是设置的窗口边框与图片间的间隔量 OpenFullSizeWindow(theURLwinName width= + (imgObjwidth+) + height= + (imgObjheight+)); else // 因为通过 Image 对象动态装载图片不可能立即得到图片的宽度和高度所以每隔毫秒重复调用检查 setTimeout(checkImg( + theURL + + winName + ) ) } } function OpenFullSizeWindow(theURLwinNamefeatures) { var aNewWin sBaseCmd; // 弹出窗口外观参数 sBaseCmd = toolbar=nolocation=nostatus=nomenubar=noscrollbars=noresizable=no; // 调用是否来自 checkImg if (features == null || features == ){ // 创建图像对象 imgObj = new Image(); // 设置图像源 imgObjsrc = theURL; // 开始获取图像大小 checkImg(theURL winName) } else{ // 打开窗口 aNewWin = windowopen(theURLwinName sBaseCmd + features); // 聚焦窗口 aNewWinfocus(); } } //> </script> 使用时将上面的代码放在网页文档的<head></head>标记对中然后在链接的点击事件中调用OpenFullSizeWindow函数如<a onClick=OpenFullSizeWindow(thishref);return false><img src=smalljpg></a>即可 以上代码在IE x－中测试通过 |
